How to setup NodeJS Express project with TypeScript and nodemon

How to setup NodeJS Express project with TypeScript and nodemon

NodeJS is a web application development platform built on top of JavaScript. To create NodeJS applications, we can use some popular frameworks like Express, Koa or NestJS. However, when writing NodeJS applications, using TypeScript is a good choice to make your source code clearer and easier to maintain.

In this article, we will learn how to setup a NodeJS Express project with TypeScript and use nodemon to automatically restart the application when there are changes in the source code.

Initialize project

Firstly, we need to create a new NodeJS project. To do this, we can use the following command:

mkdir express-ts
cd express-ts
npm init --y

The npm init command will create a new package.json file for the project. But to use TypeScript, we need to install some packages like express, typescript, ts-node, and @types/express. To install these packages, we can run the following command:

npm install express
npm install typescript ts-node @types/express --save-dev

Create tsconfig.json file

Next, we need to create a tsconfig.json file to set up configurations for TypeScript. This file will be placed at the root directory of the project. To create this file, we can use the following command:

npx tsc --init

This command will create a new tsconfig.json file with default settings. We can open this file and edit the settings to fit our project.

In the tsconfig.json file, we need to set the following fields:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist",
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules"
  ]
}

• target: Set the version of JavaScript that TypeScript will compile to.
• module: Set the type of module that TypeScript will use.
• outDir: The target directory to save compiled JavaScript files from TypeScript.
• esModuleInterop: Allow TypeScript to use import/export syntax of ES6.
• skipLibCheck: Ignore checking .d.ts files in the project.

Create server.ts file

Next, we will create a server.ts file to initialize the Express application. This file will be placed in the root directory of the project.

In the server.ts file, we can edit the settings for our Express application. We can use TypeScript to write the source code for this application. For example:

import express from 'express';

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

app.get('/', (req, res) => {
  res.send('This is NodeJS Typescript Application!');
});

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

In the above code, we have imported the express module and created an instance of the Express application. Then, we have defined a simple route and listen to connections on port 3000.

Configure nodemon

Finally, to make development more convenient, we can use nodemon to automatically restart the application when there are changes in the source code.

To install nodemon, we can use the following command:

npm install nodemon --save-dev

To use nodemon, we just need to edit the script field in the package.json file like this:

{
  "scripts": {
    "start": "nodemon main.ts"
  }
}

Then, we can start the project by running the command:

npm start

Next, you need to visit the following link on your browser to check the result: http://localhost:3000

Now, whenever we make changes to our code and save them, nodemon will automatically restart the application for us.

Above is a basic guide on how to setup a NodeJS Express project with TypeScript and use nodemon to automatically restart the application when there are changes in the source code.

Using TypeScript will make your source code clearer and easier to maintain, while using nodemon will make development more convenient.

Blogger — Medium — Dev.to — Facebook — X.com

• NodeJS
• React
• Docker
• Kubernetes