DEV Community

0xkoji
0xkoji

Posted on • Edited on

21 7

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

Heroku

Deliver your unique apps, your own way.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More

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

@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

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

Neon image

Set up a Neon project in seconds and connect from a Node.js application

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, cherished by the supportive DEV Community. Coders of every background are encouraged to bring their perspectives and bolster our collective wisdom.

A sincere “thank you” often brightens someone’s day—share yours in the comments below!

On DEV, the act of sharing knowledge eases our journey and forges stronger community ties. Found value in this? A quick thank-you to the author can make a world of difference.

Okay