DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
0xkoji
0xkoji

Posted on • Updated on

Auto-reload for Nodejs with TypeScript

I started using TypeScript last August since I joined the team and the team used TypeScript.

My co-worker recommended me to watch one youtube video. I forgot the title... I will put the link if I remember it.

The video was a kind of old one, but it was still useful to understand the overview of TypeScript. At the time I was like "Oh okay, seems legit and pretty nice."

Then started using it for the project and immediately I was like what the hell ?????, are you serious ???? I don't like you, TypeScript.

However, I'm using it because of my job πŸ˜‚, but I have used it for my personal project. I still need to research when TS says something to me via Terminal, but now I kind of like it.

In this post, I will show you how to use hot-reload for nodejs project with TypeScript.

Step 1 Create a nodejs project with Typescript.

Microsoft has a starter kit
https://github.com/microsoft/TypeScript-Node-Starter

If you think that is too much, you can use my template.
https://github.com/koji/typescript/tree/master/node_typescript

Step 2 Install nodemon

$ npm install -g nodemon
$ yarn add global nodemon
Enter fullscreen mode Exit fullscreen mode

Step 3 Install ts-node

$ npm i install -g ts-node # if you prefer npx, you don't need to install it globally
$ yarn add global ts-node
Enter fullscreen mode Exit fullscreen mode

Step 4 Create nodemon.json

We need to create nodemon.json file since nodemon is only working with .js.

{
  "watch": ["src"],
  "ext": "ts",
  "exec": "ts-node ./src/index.ts"
}
Enter fullscreen mode Exit fullscreen mode

Step 5 Run nodemon

$ nodemon
Enter fullscreen mode Exit fullscreen mode

Happy coding with TypeScript!!!

Buy Me A Coffee

Top comments (5)

Collapse
 
weslleysauro profile image
Weslley Rocha

Well, that's one library called ts-node-dev that makes the reload for you, just call it like ts-node and you should be fine.

Collapse
 
0xkoji profile image
0xkoji Author

@UΓ©slu, thank you for sharing the info. ts-node-dev looks good!

Collapse
 
hediet profile image
Henning Dieterichs

You should check out my library @hediet/node-reload that brings much more flexible hot reload to typescript node apps!
It can even restart single function calls!

Collapse
 
dorshinar profile image
Dor Shinar

Thanks for the article, but as far as I know this is what's known as cold reload - nodemon would simply shut down and restart your app on every change, causing a loss of state.

Collapse
 
0xkoji profile image
0xkoji Author

oh, you are right. thanks!
will change the title

🌚 Life is too short to browse without dark mode