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

• nodemon
• ts-node

---

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! 🥳

Comments

[ABIDULLAH786]

Hi Wagner Manganelli! 👋
Welcome to the dev.to community! 🎉

Glade to see your post about setting up nodemon along with ts-node for ES Modules. It's a great topic, especially for developers who are looking to enhance their development process. Your explanation of hot-reloading and the step-by-step guide are very helpful.
Keep up the excellent work in sharing valuable tutorials like this. Looking forward to more of your contributions!

Best regards,
Abidullah
Dev.to Moderator

[Wagner Manganelli (aka manga)]

Hello, Abidullah, thanks for your kind words, for sure I will keep up this work, count on me 😉. Happy to be part of this great community.
best, manga 🥭

[Marius Ileana]

Please note that using either nodemon or ts-node-dev, there is a process restart on detected changes. That is not hot reload, since there is no state that is kept after the restart.

[Romy]

Error for node versions > 18
ERR_UNKNOWN_FILE_EXTENSION

To resolve, use
tsx watch src/server.ts