Search This Blog

Dec 2, 2023

Typescript with VS code notes

IDE related

IDE - launch profile

  1. To add a different launch profile (i.e. run same source file with different settings, or specify a different start script etc.). Open launch.json file in editor, click on "Add Configuration" button. Resulting file below
        // Sample launch.json
        "version": "0.2.0",
        "configurations": [
            {
                "type": "node",
                "request": "launch",
                "name": "Run Dist/index.js",
                "program": "./dist/index.js",
                "envFile": "${workspaceFolder}/.env",
                "outFiles": [
                    "${workspaceFolder}/**/*.js"
                ]
            },
            {
                "type": "node",
                "request": "launch",
                "name": "Run testSMS.js",
                "program": "./dist/testSMS.js",
                "envFile": "${workspaceFolder}/.env",
                "outFiles": [
                    "${workspaceFolder}/**/*.js"
                ]
            }
        ]
    }
  2. Select a launch item to run
    1. Click "Run & Debug" button
    2. at top left corner, click on dropdown list besides green triangle, it should list 2 launch items listed in above sample file, one called "run index.js", the other called "run testsms.js".
    3. Select either one to run
  3. Any environment variables you specified in envFile above, you will have to define them as well in other running environments. For example, if you run the script from command line using "node.exe" then you have to "set env variables". If run in Azure app service, it should be defined under app service, configuration \ application settings section
  4. In launch.json, "type" could be "node" or "node-terminal" etc., it determines how/where screen output is sent. Using type=node together with below so outputs are sent to Debug console instead of Terminal console. Advantages of Debug console: filtering, setting breakpoint, coloring etc.
        "console": "internalConsole",            // <--- Force Debug Console
        "outputCapture": "std"                   // <--- Captures std out and err
  5. Bulletpoint placeholder
Source code version control

How to change code for a github project
  1. Click on the "source control" icon in left hand navigation bar (ctrl-shift-g)
  2. click "clone repository"
  3. select "clone from github(remote source code)"
  4. save it to a local folder
  5. You can run 'npx tsc' to compile

  6. Once finish coding, you can commit etc
How to make a local copy of published module/library, modify/debug locally, then publish when done
  1. Make a local copy of the module and link to it
    1. in main app, "npm install moduleName", this will download and update dependency
    2. in module, run "npm link" //this link command is global, so you only need to make one local copy, and it's available machine wide. In all other places you need this module, just run next command "npm link moduleName"
    3. in main app, run "npm link moduleName"
  2. In module, once finish testing
    1. "npm ver #newVersionNumber" //Increase module version
    2. "npm publish"                             // publish to npm repository
    3. "npm unlink"                               // delete link
  3. In main app
    1. "npm unlink moduleName"        //disconnect link
    2. (optional) update package.json to use new module version
    3. "npm install moduleName"
    4. verify that new version is listed in package.json dependency section
  4. Other related commands
    1. npm ls -g --depth=0 --link=true  <To see linked library globally>
    2. npm ls --link=true                       <to see what's linked in your current project>
    3. npm ls grage-lib-jl                      <To see where a specific package is linked from>
How to update a library (applies to scenarios where library is a separate rep and uploaded to npm)
  1. "npm install" to insall all dependant moudles
  2. Do NOT update the library source code in main program
  3. open a separate code window, make changes
  4. finish change and commit/sync
  5. "npm version patch" to update patch number. (or use other npm version  parameter to update minor version or major version)
  6. "npm publish" to publish it to NPM repository
  7. back to main program, 
    1. if package.json uses "^version#" in dependencies section, run "npm update", it should pull the latest version
    2. if package.json uses "version #" dependencies section, then edit the version# to be latest version, then remove library folder, and "npm install"

Azure related

Deploy
  1. With Azure extension setup, you can just right click on an Azure app, right click, "deploy" to deploy current project 
  2. Download deployment: 
    kudu zip api
  3. There are multiple ways an app can be deployed
    1. setup CI/CD in Azure app service
    2. setup github as external git source
    3. in github, set up Github Actions. This involves create a workflow yml file in which you can define with or without triggers. Sync triggers work same way as CI/CD pratically
  4. app name in workflow file must match what's in Azure
  5. If you have multiple package.json file in different folders that definds different dependencies for each folder, then "npm install" must be called in all folders. Define "npm install" and "npm build" in root package.json in such a way that it calls both in each sub-locations
  6. You need to define "engines" section with expected nodejs version in package.json file

Typescript syntax

  1. import * from "./ws" means importing a file "ws.ts" under same folder
    import * fro "ws" means importing a 3rd party module called ws from node-module folder