Hot Reload Node Typescript Server

The following snippet demonstrates how to setup a Node.js project with TypeScript, then automatically reload or restart the node app on every code change. Basically, the goal is to run the TypeScript compiler and a node app concurrently. It is useful when you have something like an Express server and want to avoid manually restarting it.

Configure a Node Project with TypeScript

Start with a Node project.

npm init -y

npm install --save-dev concurrently nodemon typescript

Dependencies

Add the following dependencies and scripts. Nodemon will automatically restart the node app when the dist code changes. Concurrently runs multiple commands at the same time.

{
  "name": "ts-hot-reload-node",
  "version": "1.0.0",
  "description": "Reload your server when typescript compiles",
  "main": "index.js",
  "devDependencies": {
    "concurrently": "^5.2.0",
    "nodemon": "^2.0.3",
    "typescript": "^3.2.2"
  }
}

TS Config

Add a tsconfig.json to configure the TypeScript compiler. Feel free to customize it. The following config looks for code in the src directory and compiles it to dist.

{
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "es2017",
  },
  "compileOnSave": true,
  "include": [
    "src"
  ]
}

Build & Serve Scripts

The dev command runs the TypeScript compiler in watch mode, while at the same time using nodemon to monitor changes in the dist folder.

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "dev": "concurrently \"tsc -w\" \"nodemon dist/index.js\""
  },
}

npm run dev