Is there a way to use npm scripts to run tsc -watch && nodemon --watch?

Question

I'm looking for a way to use npm scripts to run tsc --watch && nodemon --watch at the same time. I can run these commands independently, but when I want run both of them, only the first one is executed. eg:

"scripts": {    
    "runDeb": "set NODE_ENV=development&& tsc --watch && nodemon --watch"
  }

tsc --watch is executed but nodemon is never called, and vice versa.

Answer 1

I think what you want is something like this (my current setup):

"scripts": {
    "compile": "tsc && node app.js",
    "dev": "./node_modules/nodemon/bin/nodemon.js -e ts  --exec \"npm run compile\""
}

I created two scripts "compile" and "dev". To start developing you simply run npm run dev which starts nodemon and makes it watch .ts files (using the -e flag). Then, every time a .ts file changes nodemon will exec the compile task which basically compiles and runs the node app.

While using concurrently is a good option, my setup guarantees that tsc's work is done before attempting to execute the resulting .js files.

Answer 2

I have been using AlterX's solution for a while now and it has worked perfectly, but I have found it to be rather slow. Instead, I am now using tsc-watch. It makes tsc use incremental compilation similar to the -w flag, making the restart of the application much faster.

It's as easy as putting something similar to this in your package.json:

"scripts": {
  "start": "./node_modules/.bin/tsc-watch --onSuccess \"node .\""
}

Answer 3

Try to add this to your package.json:

"scripts": {
  "start": "concurrently --kill-others \"tsc -w\" \"nodemon dist/app.js\"",
}

And also add this npm packages (concurrently, nodemon, typescript) to your package.json:

"devDependencies": {
  "concurrently": "^2.2.0",
  "typescript": "^1.8.10",
  "nodemon": "^1.9.2",
}

Answer 4

What's going on

The problem is there are two watchers here on all the files. One is tsc -w and one is nodemon.

When a change to a .ts file is made, tsc detects that, compiles it, and creates the .js version in your destination folder.

Now from the Nodemon's perspective, it detects two changes (at least) -- one for .ts and one for .js. On the first change it restarts itself, but on the second change it doesn't know that another "start" is going on already, so it tries to restart again and it fails. To me it's a nodemon bug -- see https://github.com/remy/nodemon/issues/763.

Solutions

1) Use tsc-watch --onSuccess

tsc-watch has --onSuccess which you can put node on there. This way you will have only one watcher.

2) Delay nodemon

You can easily delay nodemon restarts (See --delay). It requires the least set up change.

3) Have nodemon only monitor destination folder of TSC

I couldn't get it to set up, but this way nodemon will detect only one change hopefully. It might cause problems in future or when tsc generates multiple files.

Answer 5

My solution in october 2018 using newest versions of nodemon.

first:
install nodemon(npm install nodemon --save-dev) and ts-node(npm install ts-node --save-dev)

second:
create a nodemon.json . I like to keep my nodemon config in a seperat nodemon.json to make the npm scripts a tad easier to read. So create nodemon.json in the root of the project with the following content:

{
    "ignore": ["**/*.test.ts", "**/*.spec.ts", ".git", "node_modules"],
    "watch": ["src"], // your .ts src folder
    "exec": "npm start", // your npm script created in package.json
    "ext": "ts"
}

then create your npm start script e.g like this:

"scripts": {
    ...
    "start": "ts-node src/server.ts",
    "dev:ts": "nodemon",
    ...
  }

Then run npm run dev:ts or yarn dev:ts should run and watch your typescript server code.

For more configs like Jest units tests etc... you can take a look into this article

Answer 6

The TypeScript-Node-Starter is fast

https://github.com/microsoft/TypeScript-Node-Starter/blob/master/package.json

"dev": "concurrently -k -n \"TypeScript,Node\" -c \"yellow.bold,cyan.bold\" \"npm run watch-ts\" \"nodemon ./dist/app.js\"",
"watch-ts": "tsc -w"

Here we are giving npm run watch-ts the TypeScript name (by using concurrently -n) and adding the color yellow.bold by using the concurrently -c.

So, I can recognize pretty easy the messages for each process.

Answer 7

Here is another way, use sleep in your concurrently command before starting nodemon.

eg,

"scripts": {
    "dev": "concurrently -k \"tsc -p ./src/server -w\" \"tsc -p ./src/client -w\" \"sleep 5 && nodemon ./dist/server/server.js\"",
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node ./dist/server/server.js"
  },

In my situation, I generate both client and server typescript projects at the same time, which causes nodemon to actually start 3 times when I execute npm run dev. But if I sleep 5 seconds before starting the nodemon process, then both tsc processes have already finished, and then continue watching.

You could also use the delay option of nodemon, but I only need it to delay the first time when I execute npm run dev. After that, every individual recompilation of which ever file in whichever project, correctly restarts nodemon only once.

caveat, If your server is slow, you may need to increase the sleep delay longer than 5.

Also, I did try the accepted answer, but my solution was faster for subsequent recompilations while nodemon and the tsc watch processes continued to run.

1 second for my solution, versus 5 seconds for the accepted. I couldn't get the accepted answer to actually run tsc in watch mode, so that's why it was slower, since both TypeScript projects were getting a full recompile on every change.

Answer 8

Normal compilation is: if file name is main.ts

step 1: tsc main.ts

step 2: node main.js

Simple and Onetime(loop) compilation:

tsc main --watch