How do I execute typescript watch and running server at the same time?

Question

I was developing my project in nodejs. I found if I need to code and test api, I will run two console, one is to execute typescript watch, another is to execute server.

I think it's so troublesome. I find other developers on github have written scripts in package.json. It's easy to call any commands. It attracts how to write the scripts and simply my development workflow.

In short, the comand of typescript watch is tsc -w and the comand of running server is node app.js. My idea is merge the commands as tsc -w & node app.js but I can't work the two commands at the same time. How do I do? Thanks.

Answer 1

Step 1

install concurrently, use npm or yarn

yarn add concurrently -D   

Step 2

create a script with this command

"scripts": {
    "run": "tsc && concurrently \"tsc -w\" \"nodemon dist/app.js\"",
}

run tsc first so that your directory has something at the time of running node

And with that you will have running your Typescript application ?

Answer 2

Another option can be to use nodemon:

tsc -w & nodemon app.js

Since Typescript 3.4 the compilation is faster because you can use the incremental compiler option and they keep improving (including interesting changes for large projects in 3.8).

Update:

I also moved to use concurrently as HerberthObregon says in his answer

Answer 3

TLDR, If you like nodemon this is a straight forward way to get file watch, compilation and execution:

nodemon --ext ts --exec 'tsc && node dist/index.js'

Optionally replace tsc with babel for faster compilation.

Here is a more complete example, in package.json (with source maps):

"scripts": {
  "develop": "nodemon --ext ts --exec 'yarn build --incremental && yarn serve'",
  "build": "tsc",
  "serve": "node --require source-map-support/register dist/index.js",
  ...
},

Install source-map-support as a dependency if you want, ahem... source map support! Otherwise, remove --require source-map-support/register from the serve script above.

tsconfig.json

{
  "compilerOptions": {
    ...
    "sourceMap": true,
    "outDir": "dist",
  }
}

Answer 4

Just going to throw my hat in here, here's a solution using ts-node-dev and concurrently, similar to the one provided by @HerberthObregon but using ts-node-dev instead of nodemon:

"scripts": {
    "start": "npm run build && concurrently \"npm run build:watch\" \"npm run dev\"",
    "dev": "tsnd --respawn src/main.ts",
    "build": "tsc -p tsconfig.release.json",
    "build:watch": "tsc -w -p tsconfig.release.json"
}

Bonus: If you need help with your figuring out tscand your tsconfig.json, I use the sensible defaults from this node typescript starter.

Answer 5

Building on herberthObregon's answer

Step 1: Install packages

npm install concurrently typescript nodemon --save-dev

Step 2: Create these scripts in package.json

"scripts": {
   "build": "tsc",
   "build:watch": "tsc -w",
   "dev": "npm run build && concurrently \"npm run build:watch\" \"npm run serve:watch\"",
   "serve": "node dist/index.js",
   "serve:watch": "nodemon dist/index.js"
},

• build runs a standard typescript build
• build:watch runs typescript build in watch mode
• serve serves up your node project (assuming your tsconfig outputs to dest/index/js)
• serve:watch uses nodemon to restart the node server whenever the js output changes
• dev puts them all together