Vue2 + koa2 + typescript front and back end framework tutorial — 02 back end koa2 framework automatic restart compilation service (nodemon)

Time:2021-7-29

After building the koa framework of typescriptp version in the previous article, F5 runs the server and the page is displayed normally.

What I want to share today is that if you want to modify the server code and let the compilation service restart automatically, there is no need to manually end the service and restart.

The nodemon tool is required to automatically restart the service. Nodemon can automatically detect file changes in the directory and debug node.js-based applications by restarting the application.

1. Install nodemon globally

npm i nodemon -g

2. Configure the boot file lunch.json and modify it to the following code

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    “version”: “0.2.0”,
    “configurations”: [{
        “type”: “node”,
        “request”: “launch”,
        “name”: “Launch Program”,
        “preLaunchTask”: “typescript”,
        “protocol”: “inspector”,
        “program”: “${workspaceFolder}/index.ts”,
        “outFiles”: [
            “${workspaceFolder}/bin/*.js”
        ],
        “runtimeExecutable”: “npm”,
        “runtimeArgs”: [
            “run”,
            “debug”
        ],
        “port”: 5858,
        “env”: {
            “NODE_ENV”: “dev”
        },
        “restart”: true,
        “console”: “integratedTerminal”,
        “internalConsoleOptions”: “neverOpen”
    }]
}

3. Modify the scripts of package.json as follows:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558 
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [{
        "label": "typescript",
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "isBackground": true,
        "problemMatcher": "$tsc-watch",
        "option": "watch"
    }]
}

4. Modify task.json as follows:

 "scripts": {
    "start": "node ./bin/index.js",
    "debug": "nodemon --watch ./bin --inspect=0.0.0.0:5858 --nolazy ./bin/index.js",
    "build": "npm run build-ts",
    "build-ts": "tsc",
    "watch": "npm run watch-ts",
    "watch-ts": "tsc -w"
  }

5. After F5 operation and commissioning, the console displays as follows:

Vue2 + koa2 + typescript front and back end framework tutorial -- 02 back end koa2 framework automatic restart compilation service (nodemon)

6. Index.ts the content of the above article remains unchanged. Open the browser and enter the address: localhost: 3000. The display effect is as follows:

const Koa = require('koa');
const app = new Koa();

app.use(async (ctx: any) => {
  ctx.body = 'Hello World';
});

console.log('app server start on port 3000...')
app.listen(3000);

Vue2 + koa2 + typescript front and back end framework tutorial -- 02 back end koa2 framework automatic restart compilation service (nodemon)

7. Modify the index.ts code as follows: (only modify: CTX. Body = ‘hello world… Hello Laolv’;)

const Koa = require('koa');
const app = new Koa();

app.use(async (ctx: any) => {
  ctx.body = 'Hello World...Hello LaoLv';
});

console.log('app server start on port 3000...')
app.listen(3000);

8. Save index.ts, and the console will automatically compile the output:

Vue2 + koa2 + typescript front and back end framework tutorial -- 02 back end koa2 framework automatic restart compilation service (nodemon)

9. Open the browser, refresh and automatically change to the modified result. The effect is as follows:

Vue2 + koa2 + typescript front and back end framework tutorial -- 02 back end koa2 framework automatic restart compilation service (nodemon)

At this point, the functions of back-end debugging, automatic compilation and restart service are completed.

 

After F5, the following questions may pop up in vs Code: cannot connect to runtime process, timeout after 10000 MS –

Vue2 + koa2 + typescript front and back end framework tutorial -- 02 back end koa2 framework automatic restart compilation service (nodemon)

The solution is to add “port” in launch.json:   5858, because the port here should be the same as — inspect in scripts — > debug in package.json   The ports of 0.0.0.0:5858 are consistent.

 

Attachment: the document structure is as follows

Vue2 + koa2 + typescript front and back end framework tutorial -- 02 back end koa2 framework automatic restart compilation service (nodemon)

 

(the article is original by Lao LV, please indicate the source for reprint)