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.

What I found is that I can run .ts files with ts-node but I want also to watch .ts files and reload my app/server. An example of this is the command gulp watch.

Eared

Answer 1

You can now simply npm install --save-dev ts-node nodemon and then run nodemon with a .ts file and it will Just Work:

nodemon app.ts

---

Previous versions:

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.

---

And with even 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"
}

Witt

if index.ts is a express instance, how can i kill it and restart – Lakin

@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 :) – Witt

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 – Unrest

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 – Orvil

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" } – Tingey

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"] – Aldebaran

I'm using grunt-ts with nodemon, what is the difference?.. Should I use grunt-ts or ts-node..? – Cayuga

@Witt nomdemon.json should be nodemon.json, i think – Logroll

nodemon.json file makes things easier, thanks for sharing. – Forwent

still the best practice? – Kalsomine

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? – Ellerey

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. – Except

nodemon and ts-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. – Ihs

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" – Draughtsman

with first nodemon.json version I had to run nodemon -e ts, now with updated config file this option is not required. – Affairs

I've tried running npm install --save-dev ts-node nodemon then nodemon src/index.ts but still get the error: ts-node is not recognized as an internal or external command.... Is there a reason it's still not? – Remand

This doesn't seem to work for me out of the box. Fortunately, nodemon can be easily configured. Try npx nodemon -h for a list of options. This is what worked for me: nodemon --watch src --ext ts,js – Photoactinic

Simply running nodemon app.ts didn't recompile on changes to .js files. I had to use the more verbose version and include js in the --ext flag. – Show

Answer 2

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

[EDIT] Since I wrote this answer, nodemon has improved a lot, the required config is much lighter now and performance is much better. I currently use both (on different projects, obviously), and am satisfied with both.

Essy

And why is this better? – Kamenskuralski

It's faster, and automatically detects which files need to be watched, no config needed. – Essy

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. – Ravenravening

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 – Microbicide

in my case, this literally 10 times faster than nodemon with ts-node. Thank you! – Valeta

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. – Aer

Unfortunately, no longer maintained and stopped working for me. Had to revert to nodemon. – Ermine

It is very fast. I just added it as follows: "start": "ts-node-dev --respawn --transpileOnly src/index.ts" – Stem

This litereally made me went from 5-6 seconds to reload to ~0.5 seconds, changed my whole experience – Bonnee

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. – Crimson

nodemon + ts-node without config worked for me. Simple command: nodemon src/index.ts – Mosera

fast is an understatement for this... thanks a lot bro... I was using the shi**y nodemon for so long – Getup

the debugger wont attach with ts-node-dev, is there a fix? – Gladsome

Somethings wrong with this package, I highly advise that no one downloads this globally. When I installed it globally, I could no longer run react native with expo. Something like that shouldn't happen. – Cruet

ts-node-dev is a nice idea but it has a lot of problems. It's really just not reliable enough for real-world use. The maintainer seems underequipped to deal with the issues, unfortunately. Back to nodemon I go... – Fibered

Went from nodemon to ts-node-dev on Windows, as a reload after file changes always crashed the ts-node process, with "port already in use". – Carencarena

Its better because works like nodemon and has others setup. Theoretically, is faster too. – Clung

I used this, but eventually I realized it's having major issues with picking up changed files. Saving a file, process is restarted, but somehow old files are still being used. Super annoying. Not an issue with accepted answer.🤷‍♂️ – Hereof

Answer 3

Summary of options from other answers

• nodemon plus ts-node is pretty stable but needs to be explicitly configured and is somewhat slow
• node-dev plus ts-node requires much less configuration than nodemon but is still slow
• ts-node-dev is fast but unreliable

Note that tsx (which uses ESBuild under the hood) and swc don't do type checking; this should be acceptable since most editors have type checking built-in, and type checking should still be part of your build process. You can also do type checking separately alongside your tests or as a pre-push hook via tsc --noEmit.

(Recommended) tsx

ⓘ TL;DR: fastest with minimal configuration

As of 2023-02-01, tsx seems to be the best combination of speed and minimal configuration:

1. Install tsx

   npm install --save-dev tsx
   

2. Update your package.json, e.g.

   "scripts: {
     "dev": "tsx watch src/index.ts",
   

3. Run it

   npm run dev
   

   (Adjust these steps if you just want to install tsx globally and run it directly)

Alternative 1: nodemon/node-dev + ts-node + swc

ⓘ TL;DR: as fast as tsx but with more configuration

An alternative option that combines the reliability of nodemon/node-dev with the speed of ts-node-dev is to use ts-node with swc, a TypeScript-compatible transpiler implemented in Rust which is an "order of magnitude faster" than the TypeScript transpiler.

1. Install nodemon or node-dev (whichever you prefer)

   • nodemon

     npm install --save-dev nodemon 
     

   • node-dev

     npm install --save-dev node-dev 
     

2. Set up ts-node with swc integration

   https://github.com/TypeStrong/ts-node#swc-1

   1. Install necessary packages

      npm install --save-dev ts-node @swc/core @swc/helpers regenerator-runtime
      

   2. Add this to tsconfig.json

        "ts-node": {
          "swc": true
        }
      

3. Run nodemon or node-dev, e.g

   nodemon --watch src src/index.ts
   

   or:

   node-dev src/index.ts
   

Alternative 2: nodemon/node-dev + ts-node transpileOnly

ⓘ TL;DR: fast, reliable

Here's an alternative that's slower than the previous option because it uses the standard TypeScript transpiler, but in my testing it's still faster than nodemon/node-dev + ts-node.

Basically it's the same as the previous option but without swc. It's faster than out-of-the-box ts-node by disabling type checking (see notes above regarding why this should be acceptable).

1. Install nodemon/node-dev as above

2. Install ts-node

   npm install --save-dev ts-node
   

3. Modify your tsconfig.json to enable transpileOnly for ts-node

     "ts-node": {
       "transpileOnly": true
     }
   

4. Call nodemon/node-dev as above

Alternative 3: nodemon + tsc --incremental

ⓘ TL;DR: fast, reliable, type checking, more finicky

This is nearly the same speed as the previous alternative. The only real advantage of this over the other options is that it does type checking.

In terms of downsides, it can be a bit more finicky; in my testing, I'm using dotenv to pick up my .env file for local development. But depending how your tsc build is configured in tsconfig.json, you may have to do some acrobatics to get it working.

But it's good to have options, so here it is:

1. Install nodemon as above

   (It's possible that this may work with node-dev as well, but I didn't see an exec option for node-dev)

2. Configure tsconfig.json to transpile your TypeScript to JavaScript

   In particular, noEmit should not be set to true

3. Configure nodemon to run the TypeScript compiler to do an incremental transpilation any time a TypeScript file is changed, e.g.

   "dev": "nodemon -e ts --watch src .env --exec \"tsc --incremental && node src/index.js\"",
   

   You can even remove --incremental to further simplify it, but it will end up being much slower, comparable to nodemon/node-dev + ts-node.

Anecdotal

If you install nodemon locally, you cannot run nodemon on cmd. Instead, install it globally with -g. – Bunk

You can still run it without it being installed globally (e.g. node_modules/.bin/nodemon), but given that I almost always need to provide flags to nodemon, it's much more convenient to add a script in package.json that runs nodemon with all the flags I need (as in the example in Alternative 3). That also makes it more convenient when working with multiple projects; you can just call npm run dev and not have to remember how each project needs to be configured. Of course you're more than welcome to install it globally if that suits your fancy. – Anecdotal

What do you mean by "type checking should still be part of your build process". And how would I include type checking in my build process? – Classmate

@Classmate The tools recommended by the answers on this page are for local development. But for production, it's generally recommended to transpile the TypeScript to JavaScript, which is the "build" step. If you're using the TypeScript compiler (tsc), it does type checking by default (actually I don't think there's any way to turn it off). Since you might not want to wait until build time to find out if there are any type errors, you could also use tsc to do type checking as part of your testing process or as a pre-push hook. – Anecdotal

tsx doesn't support emitDecoratorMetadata for now – Copse

Answer 4

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.

Owner

Also be sure to have typescript locally installed for the project. Otherwise the error you might get is not very clear. – Irritation

I think it should be ts-node --inspect -- src/index.ts now due to this. – Illmannered

This approach seems to generate considerable superfluous output. – Reverent

-e ts -w ./src did the trick for me - this worked with a loopback4 CLI generated project – Puttergill

I get Error: Unknown or unexpected option: --inspect. It seems that ts-node does not have the flag. – Bunk

@Bunk looks like starting from v5.0.0 for advanced node.js flags (like --inspect in this case) you need to run ts-node as node -r ts-node/register command. – Owner

I also had to use the --legacy-watch flag to make autoreload possible. Any idea why? – Bunk

Answer 5

This works for me:

nodemon src/index.ts

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

Hoodoo

This works for me too but how? Seems kind of magical. What's compiling the typescript? I don't have ts-node installed. – Fiord

@Fiord Are you sure it's not in your node_modules/? For me it fails if I don't have it. – Hoodoo

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. – Brost

Install ts-node globally: npm install -g ts-node – Mosera

Answer 6

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"
}

Juju

Thank you! This was the easiest way I found to enable auto reload with my node server. – Wulfe

Answer 7

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"

Liebman

How would this work in the case of an express or koa server since it doesn't actually kill the previous node instance? – Azar

'tsc-watch' kills and restarts the process for you. – Liebman

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! – Gonzalogoo

@Liebman in the documentation of your package there is a typo: "[...] similar to nodemon but for TypeCcript.":) – Texture

Answer 8

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

Rh

Answer 9

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.

Diestock

Like walking on glass. But an alternative, non-the-less – Frondescence

Answer 10

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'

Lyall

Answer 11

Standard Approach

Starting from Node.js version v16.19.0, the CLI API introduces the --watch option, eliminating the need for additional dependencies like nodemon.

For TypeScript execution, use well-established package ts-node. Here's configuration example:

// package.json
{
    "scripts": {
        "dev": "node --watch --loader=ts-node/esm ./src/app.ts"
    },
    "devDependencies": {
        "ts-node": "~10.9.0"
    }
}

Non-Standard Approach

Alternatively, you might consider tsx, although it's not as mature as ts-node.

Keep in mind that tsx currently lacks support for emitDecoratorMetadata a crucial feature for many projects that need decorators. Despite this drawback, tsx offers faster compilation (esbuild backend):

// package.json
{
    "scripts": {
        "dev": "tsx watch ./src/app.ts"
    },
    "devDependencies": {
        "tsx": "~4.6.0"
    }
}

Copse

Lots of errors with this for example Caused by: unknown field `noInterop`, expected `resolveFully` at line 1 column 433 – Prairie

Please give additional context. What specifically do you mean by "Lots of errors", share your project setup, tooling you are transitioning from, etc.... – Copse

@OliverDixon This is because ts-node doesn't properly support the latest version of swc/core. you need to override the version of swc/core to 1.3.82 (at the time of writing). in package.json add "resolutions": { "@swc/core": "1.3.82" }, "overrides": { "@swc/core": "1.3.82" } (DO NOT copy versions used in this github issue link, use 1.3.82) github.com/TypeStrong/ts-node/issues/… – Footpad

Answer 12

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"
  },

Glaive

Or just "dev": "( tsc -w & ) && nodemon dist/index.js". – Knoll

This was a great answer for me. Simple and easy, thanks. – Rundown

Answer 13

The first step - Install the below packages in deDependencies

npm i -D @types/express @types/node nodemon ts-node tsc typescript

or using yarn

yarn add -D @types/express @types/node nodemon ts-node tsc typescript

The second step - using this configuration in your tsconfig.json file

{
  "compilerOptions": {
    "target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
    "lib": [
      "DOM",
      "ES2017"
    ] /* Specify library files to be included in the compilation. */,
    "sourceMap": true /* Generates corresponding '.map' file. */,
    "outDir": "./dist" /* Redirect output structure to the directory. */,
    "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,

    "strict": true /* Enable all strict type-checking options. */,
    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    "skipLibCheck": true /* Skip type checking of declaration files. */,
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
  },
  "exclude": ["node_modules"],
  "include": ["./src"]
}

The third step - using these scripts in your package.json file

"scripts": {
    "start": "node ./dist/server.js",
    "dev": "nodemon -L ./src/server.ts && tsc -w"
},

Intestinal

Answer 14

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

Chthonian

Answer 15

STEP 1: You can simple install nodemon and ts-node (skip if you already done)

npm install --save-dev nodemon ts-node

STEP 2: You can configure the start script in package.json

"start": "nodemon ./src/app.ts"

As now nodemon automatically identify the typescript from the project now and use ts-node command by itself. Use npm start and it will automatically compile/watch and reload.

If you get any errors like typescript module not found in the project. simple use this command in the project folder.

npm link typescript

Doloroso

Answer 16

I got this error : code: 'ERR_UNKNOWN_FILE_EXTENSION' i needed the esm support, so if you want ES6 support you can try bellow commands

npm i -D ts-node nodemon

in package.json add below script :

"dev": "nodemon --exec ts-node-esm ./src/index.ts"

Pull

Answer 17

Just update these 3 packages

nodemon, ts-node, typescript
yarn global add nodemon ts-node typescript

or

npm install -g nodemon ts-node typescript

and now you can run this, problem solved

nodemon <filename>.ts

Getaway

Please add your comments or instructions outside of your code. That will be more understandable and readable. – Mildamilde

Answer 18

Clear logs of the console after changing

Javascript:

"start": "nodemon -x \"cls && node\" index.js",

Typescript:

"start": "nodemon -x \"cls && ts-node\" index.ts",

Dareen

Answer 19

Probably the easiest way is to install Nodemon and run: "nodemon --exec npx ts-node --esm test.ts"

Loralyn

Answer 20

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"

Sabbatical

Answer 21

add --poll options on your package.json

The --poll option in ts-node-dev tells it to check the source code files for changes by periodically looking at them, instead of waiting for the file system to report changes. This ensures that changes to the files are always detected, even on file systems that don't report changes reliably.

   "start": "ts-node-dev --poll src/index.ts"

Faveolate

Answer 22

With ts-node-dev version 2.0.0+ you can use:

ts-node-dev --respawn ./src/index.ts

*Note: If you get "command not found" error, then you can run it directly from node-modules like so:

./node_modules/.bin/ts-node-dev --respawn ./src/index.ts

Glenda

Answer 23

There's also another option if you'd like to forego just running both tsc and the payload in parallel, and want them to be more coupled together without needing to switch to a complicated tsc wrapper or alternative. You could also write a Node.js script to wait for the TypeScript compiler to complete building and then start your process when the build is complete.

This is what I wrote for one of my projects (this needs the tree-kill package installed):

#!/usr/bin/env node

import { spawn } from 'node:child_process';
import { join } from 'node:path';
import { createInterface } from 'node:readline';
import process from 'node:process';
import kill from 'tree-kill';

const cwd = process.cwd();
const tscConfigPath = join(cwd, 'tsconfig.build.json');
const tscArgs = ['tsc', '--build', '--watch', '--pretty', tscConfigPath];
const command = process.argv.slice(2);

// adjust params above as necessary

const tsc = spawn('yarn', tscArgs, { // change if not using yarn
  stdio: ['ignore', 'pipe', 'inherit'],
  cwd,
});

let proc;

const startCommand = () => {
  proc && kill(proc.pid);
  proc = spawn(command[0], command.slice(1), { stdio: 'inherit', cwd });
};

const rl = createInterface({
  input: tsc.stdout,
  terminal: false,
});

rl.on('line', (line) => {
  console.log(line);
  if (line.includes('Found 0 errors. Watching for file changes.')) {
    startCommand();
  }
});

tsc.on('exit', (code) => {
  console.log('tsc exited with code', code);
  proc && kill(proc.pid);
  process.exit(code);
});

process.on('SIGINT', () => {
  kill(tsc.pid);
  proc && kill(proc.pid);
  process.exit(0);
});

process.on('exit', () => {
  kill(tsc.pid);
  proc && kill(proc.pid);
});

I use it in other packages in my monorepo like this in the package.json manifest:

"scripts": {
  "start:dev": "run-on-tsc-build yarn node dist/main.js"
}

It works by waiting to see the "Found 0 errors. Watching for file changes." message from Typescript and then running the given command.

Vadose

Answer 24

With nodemon and ts-node:

nodemon --watch source --ext ts,json --exec "node --loader ts-node/esm ./source/index.ts"

Later