How to watch and reload ts-node when TypeScript files change

Question

I'm trying to run a dev server with TypeScript and an Angular application without transpiling ts files every time. I found that I can do the running with ts-node but I want also to watch .ts files and reload the app/server as I would do with something like gulp watch.

score 565 · Accepted Answer · edited Apr 18 '21 at 13:08

565

EDIT: Updated for the latest version of nodemon!

I was struggling with the same thing for my development environment until I noticed that nodemon's API allows us to change its default behaviour in order to execute a custom command.

For example, for the most recent version of nodemon:

nodemon --watch "src/**" --ext "ts,json" --ignore "src/**/*.spec.ts" --exec "ts-node src/index.ts"

Or create a nodemon.json file with the following content:

{
  "watch": ["src"],
  "ext": "ts,json",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "ts-node ./src/index.ts"      // or "npx ts-node src/index.ts"
}

and then run nodemon with no arguments.

By virtue of doing this, you'll be able to live-reload a ts-node process without having to worry about the underlying implementation.

Cheers!

And with older versions of nodemon:

nodemon --watch 'src/**/*.ts' --ignore 'src/**/*.spec.ts' --exec 'ts-node' src/index.ts

Or even better: externalize nodemon's config to a nodemon.json file with the following content, and then just run nodemon, as Sandokan suggested:

{ "watch": ["src/**/*.ts"], "ignore": ["src/**/*.spec.ts"], "exec": "ts-node ./index.ts" }

edited Apr 18 '21 at 13:08

Karl Horky

3,362
27
33

answered Jun 22 '16 at 22:56

HeberLZ

8,576
4
20
24

if `index.ts` is a express instance, how can i kill it and restart – hjl Aug 23 '16 at 08:41
@elaijuh in theory this same command should do the trick, when nodemon is configured to execute a custom command (in this case ts-node) instead of the default node command, it will shut down the process and start a new one each time it finds a change on the watch expression minus the ignore expression :) – HeberLZ Aug 24 '16 at 08:21
18

you can also create a nodemon.json file with all the mentioned options in it like this: `{ "watch": ["src/**/*.ts"], "ignore": ["src/**/*.spec.ts"], "exec": "ts-node ./app-server.ts" }` and just type `nodemon` – Sandokan El Cojo Oct 27 '16 at 08:27
3

I made the mistake of adding `./` before the folder names and it broke. This worked for me: `{ "verbose": true, "watch": ["server/**/*.ts"], "ext": "ts js json", "ignore": ["server/**/*.spec.ts"], "exec": "ts-node index.ts" }`. And command line: `nodemon --watch server/**/*.ts --ignore server/**/*.spec.ts --verbose --exec ts-node index.ts` – Adrian Moisa Mar 11 '17 at 10:26
3

I would just like mention, that you also have to set the `ext` in the config file, so its look for ts changes. My config file look like this: `{ "watch": ["src/**/*.ts"], "ignore": ["src/**/*.spec.ts"], "ext": "ts js json", "_exec": "node dist/startup.js", "exec": "ts-node src/startup.ts" }` – Lasse D. Slot Mar 28 '17 at 08:45
For windows users you will need to make the exec command an array for pathing issues: `"exec": "ts-node ./src/index.ts"` becomes => `"exec": ["ts-node", "src/index.ts"]` – Armeen Harwood Sep 10 '17 at 18:34
I'm using grunt-ts with nodemon, what is the difference?.. Should I use grunt-ts or ts-node..? – danger89 May 15 '18 at 18:15
@HeberLZ `nomdemon.json` should be `nodemon.json`, i think – Simon Meusel Jun 02 '18 at 17:23
nodemon.json file makes things easier, thanks for sharing. – darul75 Feb 15 '19 at 11:16
still the best practice? – SuperUberDuper Jun 07 '19 at 16:21
I am getting (function (exports, require, module, __filename, __dirname) { import * as express from 'express'; SyntaxError: Unexpected token * looks like it is not taking es6 code, how can I add es6? – Pritam Bohra Aug 06 '19 at 14:32
I have the same config as you but it only refreshes when i update index.ts and not any of the javascript files in src. – Batman Aug 19 '19 at 17:44
`nodemon` and t`s-node` will become very slow if the typescript project goes too big. `ts-node-dev` can not reload when a ts file only contains interfaces got changes. – Ling Oct 17 '19 at 07:50
1

On Windows machines, DON'T use single quotes in your package.json. Replacing those with `\"` makes the script run fine: `"nodemon --watch \"./src/**/*.ts\" -r dotenv/config --exec \"ts-node\" src/index.ts"` – TJBlackman Mar 11 '20 at 15:27
with first `nodemon.json` version I had to run `nodemon -e ts`, now with updated config file this option is not required. – humkins Mar 17 '20 at 14:07

Mikael Couzic · Answer 2 · 2018-06-05T08:37:41.803

180

I've dumped nodemon and ts-node in favor of a much better alternative, ts-node-dev https://github.com/whitecolor/ts-node-dev

Just run ts-node-dev src/index.ts

edited Jun 05 '18 at 08:37

answered May 25 '18 at 11:19

Mikael Couzic

9,003
4
20
16

9

And why is this better? – Deilan May 31 '18 at 20:18
32

It's faster, and automatically detects which files need to be watched, no config needed. – Mikael Couzic Jun 05 '18 at 08:36
4

This is the best (if not the only) option for ts-node, especially for larger projects. It doesn't recompile all files from scratch, but does an incremental compilation, like `tsc --watch`. – Angelos Pikoulas Mar 10 '19 at 22:35
for me, I have to add "ts-node-dev": "ts-node-dev" in the script array of package.json and then do npm run ts-node-dev server.ts to make it work – bormat May 15 '19 at 12:56
3

in my case, this literally 10 times faster than `nodemon` with `ts-node`. Thank you! – Florian Ludewig Jan 16 '20 at 18:06
3

So I literally just have `"start": "ts-node-dev src"`. No need for babel, nodemon, or any of the config that comes with it. Everything is handled for you. – JMadelaine Apr 15 '20 at 04:45
1

Unfortunately, no longer maintained and stopped working for me. Had to revert to `nodemon`. – Nikola Mihajlović Apr 20 '20 at 22:35
2

It is very fast. I just added it as follows: "start": "ts-node-dev --respawn --transpileOnly src/index.ts" – varad11 Apr 22 '20 at 14:23
1

This litereally made me went from 5-6 seconds to reload to ~0.5 seconds, changed my whole experience – Mauro Insacco Jul 07 '20 at 07:09
very fast and seems to work really well, however it seems to ignore all environment variables and has some hidden behavior handling env for you. – Bejasc Aug 13 '20 at 09:07
1

nodemon + ts-node without config worked for me. Simple command: `nodemon src/index.ts` – Rafael Pizao Sep 09 '20 at 21:24
fast is an understatement for this... thanks a lot bro... I was using the shi**y nodemon for so long – Saksham Khurana May 23 '21 at 08:05
the debugger wont attach with ts-node-dev, is there a fix? – Ali80 May 25 '21 at 18:41

score 63 · Answer 3 · answered Apr 29 '17 at 18:26

63

Here's an alternative to the HeberLZ's answer, using npm scripts.

My package.json:

  "scripts": {
    "watch": "nodemon -e ts -w ./src -x npm run watch:serve",
    "watch:serve": "ts-node --inspect src/index.ts"
  },

-e flag sets the extenstions to look for,
-w sets the watched directory,
-x executes the script.

--inspect in the watch:serve script is actually a node.js flag, it just enables debugging protocol.

answered Apr 29 '17 at 18:26

im.pankratov

1,380
1
12
15

2

Also be sure to have typescript locally installed for the project. Otherwise the error you might get is not very clear. – Aranir Jul 05 '17 at 10:46
I think it should be `ts-node --inspect -- src/index.ts` now due to [this](https://github.com/TypeStrong/ts-node/issues/552). – bluenote10 Apr 01 '18 at 22:19
1

This approach seems to generate considerable superfluous output. – Freewalker Jun 28 '19 at 21:12
`-e ts -w ./src` did the trick for me - this worked with a loopback4 CLI generated project – Jonathan Cardoz Jan 06 '20 at 08:45

score 36 · Answer 4 · answered Dec 07 '19 at 15:59

36

This works for me:

nodemon src/index.ts

Apparently thanks to since this pull request: https://github.com/remy/nodemon/pull/1552

answered Dec 07 '19 at 15:59

DLight

808
9
17

This works for me too but how? Seems kind of magical. What's compiling the typescript? I don't have `ts-node` installed. – d512 Dec 11 '19 at 21:18
1

@d512 Are you sure it's not in your `node_modules/`? For me it fails if I don't have it. – DLight Dec 11 '19 at 21:41
1

This indeed does require `ts-node` to be installed. Running this command without `ts-node` will result in an `failed to start process, "ts-node" exec not found` error. You likely had this as a leftover artifact in `node_modules`. That being said, this solution is much nicer since it doesn't require additional config. – Brandon Clapp May 25 '20 at 20:45
Install ts-node globally: `npm install -g ts-node` – Rafael Pizao Sep 09 '20 at 21:26

score 20 · Answer 5 · edited May 21 '19 at 15:15

20

Specifically for this issue I've created the tsc-watch library. you can find it on npm.

Obvious use case would be:

tsc-watch server.ts --outDir ./dist --onSuccess "node ./dist/server.js"

edited May 21 '19 at 15:15

Eliasz Kubala

3,414
1
18
27

answered Mar 29 '17 at 11:23

gilamran

5,914
4
27
48

How would this work in the case of an express or koa server since it doesn't actually kill the previous node instance? – brianestey Nov 27 '18 at 03:55
'tsc-watch' kills and restarts the process for you. – gilamran Nov 28 '18 at 17:10
This is exactly what I was looking for. Not sure what the purpose of ts-node-dev is, but I couldn't get it to report typescript errors. After spending hours trying to get it working, I tried tsc-watch, and it worked like a charm! – Charles Naccio Jan 16 '20 at 08:04
@gilamran in the documentation of your package there is a typo: `"[...] similar to nodemon but for TypeCcript."`:) – Massimiliano Kraus Jan 27 '20 at 22:26

score 15 · Answer 6 · answered Mar 26 '19 at 07:59

15

you could use ts-node-dev

It restarts target node process when any of required files changes (as standard node-dev) but shares Typescript compilation process between restarts.

Install

yarn add ts-node-dev --dev

and your package.json could be like this

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "tsc": "tsc",
  "dev": "ts-node-dev --respawn --transpileOnly ./src/index.ts",
  "prod": "tsc && node ./build/index.js"
}

answered Mar 26 '19 at 07:59

jsina

2,973
24
21

Thank you! This was the easiest way I found to enable auto reload with my node server. – Hisham Mubarak Jun 12 '20 at 14:47

score 13 · Answer 7 · answered Jul 13 '18 at 04:28

13

Add "watch": "nodemon --exec ts-node -- ./src/index.ts" to scripts section of your package.json.

answered Jul 13 '18 at 04:28

takasoft

1,030
13
15

score 8 · Answer 8 · answered Aug 04 '19 at 03:41

8

i did with

"start": "nodemon --watch 'src/**/*.ts' --ignore 'src/**/*.spec.ts' --exec ts-node src/index.ts"

and yarn start.. ts-node not like 'ts-node'

answered Aug 04 '19 at 03:41

wayan wahyu Adi Putra

319
3
8

score 4 · Answer 9 · answered Mar 12 '20 at 17:11

4

add this to your package.json file

scripts {
"dev": "nodemon --watch '**/*.ts' --exec 'ts-node' index.ts"
}

and to make this work you also need to install ts-node as dev-dependency

yarn add ts-node -D

run yarn dev to start the dev server

answered Mar 12 '20 at 17:11

princebillyGK

987
11
13

score 4 · Answer 10 · answered Jul 02 '20 at 07:57

I would prefer to not use ts-node and always run from dist folder.

To do that, just setup your package.json with default config:

....
"main": "dist/server.js",
  "scripts": {
    "build": "tsc",
    "prestart": "npm run build",
    "start": "node .",
    "dev": "nodemon"
  },
....

and then add nodemon.json config file:

{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "npm restart"
}

Here, i use "exec": "npm restart"
so all ts file will re-compile to js file and then restart the server.

To run while in dev environment,

npm run dev

Using this setup I will always run from the distributed files and no need for ts-node.

score 1 · Answer 11 · answered Oct 18 '20 at 18:28

1

Another way could be to compile the code first in watch mode with tsc -w and then use nodemon over javascript. This method is similar in speed to ts-node-dev and has the advantage of being more production-like.

 "scripts": {
    "watch": "tsc -w",
    "dev": "nodemon dist/index.js"
  },

answered Oct 18 '20 at 18:28

Miguel Ángel Torres

87
1
6

Or just `"dev": "( tsc -w & ) && nodemon dist/index.js"`. – Craig Hicks May 20 '21 at 17:13

fernandopasik · Answer 12 · 2021-01-05T03:56:19.167

If you are having issues when using "type": "module" in package.json (described in https://github.com/TypeStrong/ts-node/issues/1007) use the following config:

{
  "watch": ["src"],
  "ext": "ts,json",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "node --loader ts-node/esm --experimental-specifier-resolution ./src/index.ts"
}

or in the command line

nodemon --watch "src/**" --ext "ts,json" --ignore "src/**/*.spec.ts" --exec "node --loader ts-node/esm --experimental-specifier-resolution src/index.ts"

How to watch and reload ts-node when TypeScript files change

12 Answers12

Linked

Related