The Right Way to Setup NodeJS/Typescript/Express Application

Setting up a Node.js project with TypeScript can significantly enhance your development experience by providing static typing, better tooling, and robust error-checking. This guide will walk you through the best practices for initializing and configuring a Node.js project with TypeScript and Express, ensuring a scalable and maintainable setup.

1. Initialize the Project

To get started, initialize a Node.js project using Yarn. This process is similar for npm or other package managers.

Open your terminal and run:

yarn init --yes

This command creates a package.json file with default settings.

2. Install TypeScript, Nodemon, and Express

Next, install TypeScript and Nodemon as development dependencies:

yarn add -D typescript nodemon

Install Express for handling routing and middleware:

yarn add express

3. Set Up Project Structure

Create the following directory structure for your project:

node-ts-project/
├── src/
│   ├── index.ts
│   ├── server.ts
├── package.json
├── tsconfig.json
└── nodemon.json

4. Create the Express Server

In src/server.ts, set up a basic Express server:

import express from "express";
 
const app = express();
 
app.get("/", (req, res) => {
  res.send("The Server is Running Fine 🚀");
});
 
export default app;

In src/index.ts, create the server entry point:

import app from "./server";
 
const PORT = 3000;
 
app.listen(PORT, () => {
  console.info(`Server is running at http://localhost:${PORT} 🚀`);
});

5. Configure TypeScript

Create a tsconfig.json file in the root of your project with the following configuration:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

• target: Specifies the ECMAScript target version (ES2020).
• module: Specifies the module system (commonjs).
• outDir: Directory for compiled JavaScript files (./dist).
• rootDir: Root directory of TypeScript source files (./src).
• strict: Enables strict type-checking options.
• esModuleInterop: Facilitates interoperability with non-ES modules.
• include: Specifies TypeScript files to include.
• exclude: Excludes node_modules from compilation.

6. Running the TypeScript Server

Node.js can only execute JavaScript files. We have two approaches to run our TypeScript server:

Approach 1: Compile TypeScript to JavaScript

Use this method to compile TypeScript into JavaScript and then run the compiled code. nodemon will watch for changes in TypeScript files, compile them, and restart the server.

• Add the following scripts to package.json:

  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "dev": "nodemon --watch 'src/**/*.ts' --exec 'yarn build && yarn start'"
  }

• Run the server in development mode:

  yarn dev

This setup compiles TypeScript files to JavaScript and uses nodemon to restart the server whenever changes are detected. However, this approach involves an extra compilation step.

Approach 2: Using ts-node (Recommended)

This approach is more streamlined as ts-node runs TypeScript code directly, and nodemon restarts the server without manual compilation.

• Create a nodemon.json file with the following configuration:

  {
    "watch": ["src"],
    "ext": "ts,json",
    "ignore": ["src/**/*.spec.ts"],
    "exec": "ts-node ./src/index.ts"
  }

  • watch: Directories or files to watch (src).
  • ext: File extensions to monitor (ts, json).
  • ignore: Files to ignore (src/**/*.spec.ts).
  • exec: Command to execute (ts-node ./src/index.ts).

• Update package.json scripts:

  "scripts": {
    "dev": "nodemon",
    "build": "tsc",
    "start": "node dist/index.js"
  }

• Run the server in development mode:

  yarn dev

This setup is more efficient for development as it eliminates the need for a separate compilation step and allows nodemon to handle restarts directly.

Conclusion

By following these steps, you’ll have a robust Node.js project set up with TypeScript and Express. Both approaches for running the server are effective, but using ts-node with nodemon provides a more streamlined and developer-friendly workflow. Choose the approach that best fits your development style and project needs.