Set up Hot Reload for Typescript ESM projects

TL;DR

Are you moving your projects to use ES Modules but you are facing some unexpected issues? You are not alone in this fight. In this tutorial, you will learn how to set up nodemon along with ts-node.

Wait, why are we not using ts-node-dev? Currently, there are some issues related to TS ESM projects that are making its use harder. Check this issue for more details.

Hot-Reload?

This technique is handy when you are developing locally. This will automatically watch changes over your source code and updates for you. So, you just have to make your code work and the hot-reloading will do the magic from behind the scenes. This will improve your code development process bringing more efficiency and velocity, as you will not have to restart every time your application.

Let's set it up 🔧

Prerequisites

Node.js >= v18.12.0

Initial steps

mkdir app-esm-hot-reload
cd app-esm-hot-reload
npm init -y

Install dev dependencies

npm install --save-dev typescript@5.1.6 ts-node@10.9.1 nodemon@3.0.1

Initialize TypeScript

  npx tsc --init

Configuration steps

package.json

{
  ...
  "type": "module",
  "scripts": {
    "build": "tsc",
    "dev": "nodemon src/index.ts",
    "start": "node dist/index.js"
  },
  ...
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "dist",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true
  },
  "ts-node": {
    "esm": true
  },
  "exclude": ["node_modules", "./*.ts", "__test__"]
}

Create index.ts

mkdir src
touch src/index.ts

Execute script

npm run dev

Make changes to the index.ts or any other file

Your app should be reloaded automatically

That's it! Now you can start coding without bothering with restarting your application at every change. 🍺

P.S. you can refer to this template.

Useful links

Tutorials that might interest you as well

Set up a Node.js project + TypeScript + Jest using ES Modules

I hope this tutorial improves your development process.

Thank you for reading! Happy coding! 🥳

Blog