Skip to content

Nodemon TypeScript Guide: ts-node, Babel, and ts-node-dev

If you’re building a backend app with TypeScript, you’ve probably run into this annoying routine: make a small code change, stop the server, recompile, restart. It’s slow, repetitive, and totally breaks your flow. That’s where tools like Nodemon, ts-node, and ts-node-dev come in.

In this guide, we’ll walk step-by-step through how to set up Nodemon with TypeScript for automatic reloads on file changes. You’ll learn how to configure it properly with ts-node, how to boost performance using Babel, and how to go even further with a tool that replaces both—ts-node-dev.

By the end of this article, you’ll have a clean and modern TypeScript development workflow that watches your code and restarts your server instantly when you save. Let’s dive in and level up your TypeScript development experience.

Setup for Nodemon + TypeScript Integration

Before we set up anything, let’s make sure we’ve got the right tools. We’ll assume you already have Node.js, npm, and Nodemon installed. If you haven’t installed Nodemon yet, check out this guide first.

node --version
npm --version

Now let’s move into the project folder and create a src folder to store our TypeScript code. If this is a new project, initialize it using:

cd yt-nodemon-typescript
mkdir src
npm init -y

Let’s install a few TypeScript-specific packages you’ll need for development using:

npm install typescript ts-node @types/node --save-dev
  • typescript is only needed during development to transpile .ts files. Your production environment usually runs compiled JavaScript.
  • ts-node is useful for running TypeScript directly in dev—but again, not necessary in production.
  • @types/node gives us autocomplete and type safety for Node.js features in VSCode and during compilation.

By installing these as dev dependencies, we keep our production environment lean and avoid polluting global installs.

Configure tsconfig.json for Nodemon TypeScript Support

Now that our dependencies are set, let’s configure TypeScript properly. Use this command to bootstrap the config file:

npx tsc --init --rootDir src --outDir dist --esModuleInterop

This command sets up a TypeScript configuration file with sensible defaults—and pre-fills the options we care about most. Let’s break it down:

  • --init creates a new tsconfig.json file that tells TypeScript how to compile your code.
  • --rootDir src tells TypeScript that the source code lives inside the src folder to keep your project clean and organized.
  • --outDir dist keeps TypeScript and output files separate by saving compiled JavaScript files in dist folder.
  • --esModuleInterop setting esModuleInterop to true enables the use of default import syntax with CommonJS modules like express.

Create an Express App to Test Nodemon with TypeScript

We are going to set up a basic Express server that runs on port 3000. This gives us something real to test with Nodemon later, so even if you’re not familiar with Express, it’s just a convenient tool here. First, we need to install Express.

npm install express
npm install @types/express --save-dev

Then, we’ll create a TypeScript file in the src folder.

touch src/server.ts

Inside the TypeScript file, we import the express library, initialize the app, define a simple route that displays a message in the browser, and finally listen on port 3000 for incoming requests.

import express from 'express';

const app = express();
const PORT = 3000;

app.get('/', (_, res) => {
  res.send('Hello from TypeScript + Nodemon!');
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

How to Use Nodemon with ts-node in TypeScript Projects

Now let’s get Nodemon to work with our TypeScript app. Remember, Nodemon doesn’t understand TypeScript out of the box, so we need to tell it how to handle .ts files properly.

Inside the root directory of your project, create a nodemon.json file:

{
  "watch": ["src"],
  "ignore": ["dist"],
  "ext": "ts",
  "exec": "ts-node src/server.ts"
}

Breakdown:

  • watch: We only want Nodemon to watch the src folder, which contains our actual TypeScript source files.
  • ignore: We’ll ignore the dist folder so Nodemon doesn’t get stuck in an infinite loop watching files it just compiled.
  • ext: This ensures Nodemon only reacts to changes in .ts files. It won’t restart for .js, .json, or other file types.
  • exec: This tells Nodemon to run our app with ts-node, and specifically the server.ts entry file we created earlier.

Now run the app:

npx nodemon

Then update the greeting message in server.ts and save the file.
Watch what happens in the terminal. Nodemon detects the file change and automatically restarts the app using ts-node, and you’ll see the new message when you refresh the browser.

Note that if you check your dist folder right now, it’s empty—and that’s expected! That’s normal when using ts-node because it compiles TypeScript in memory only and does not emit any .js files into your dist directory or anywhere else on disk.

Use Babel with Nodemon for Fast TypeScript Reloading

If you’re already using Babel for JavaScript in your project and want to add TypeScript support without switching tools—or want faster transpilation with more plugin flexibility—you can use this Babel + Nodemon setup to compile TypeScript instead of the TypeScript compiler or ts-node.

Step 1: Install Required Packages

First, we need to install the required packages. These packages give Babel the ability to understand both modern JavaScript and TypeScript syntax.

npm install @babel/core @babel/cli @babel/preset-env @babel/preset-typescript @babel/node --save-dev

Step 2: Create a .babelrc File

Then we need to create a .babelrc file to tell Babel to use the TypeScript preset for parsing .ts files and the env preset for compiling to compatible JavaScript.

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

Step 3: Update nodemon.json

Here, we’re telling Nodemon to use babel-node to run .ts files directly. The --extensions .ts flag is crucial—it tells Babel to treat .ts files as valid input.

{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["dist"],
  "exec": "babel-node src/server.ts --extensions .ts"
}

This setup gives you a faster transpilation and allows you to use the Babel plugin ecosystem, but you will still need tsc --noEmit, as it doesn’t check type safety. Keep in mind that babel-node is intended for development only and should not be used in production environments.

ts-node-dev: A Faster Alternative to Nodemon for TypeScript

Now let’s look at a tool that replaces both nodemon and ts-node in one shot: ts-node-dev. It’s fast, simple, and perfect for development.

Step 1: Install It

First, install it as a dev dependency, running:

npm install ts-node-dev --save-dev

Step 2: Run Your App

Then, run your app using:

npx ts-node-dev src/server.ts

That’s it. No need for a nodemon.json. It watches your files, clears the cache, and restarts the app automatically.

If you want the smoothest dev experience and don’t need to emit .js files, ts-node-dev is hard to beat. It’s fast and needs minimal config.

GitHub Repo

Want to test this out quickly? We’ve created a sample repo with everything in place.

Clone the repo, install dependencies, and try running Nodemon TypeScript on your machine right away.

Final Recap

Now, you’ve learned how to integrate Nodemon with TypeScript using ts-node, how to use Babel with Nodemon for faster TypeScript transpilation, and how to simplify everything with ts-node-dev. No matter which setup you choose, you now have a powerful and modern dev workflow that keeps your app running smoothly while you code.

Whether you stick with Nodemon and ts-node, use Babel with Nodemon, or switch to ts-node-dev, you now have a smooth, modern TypeScript dev workflow that saves time and keeps you focused on building.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.