Complete Guide: Setting Up a Node.js + Express + TypeScript Project

Introduction

When building modern backend applications, combining Node.js, Express.js, and TypeScript provides a powerful and scalable development experience. Node.js offers a fast runtime environment, Express.js simplifies API development, and TypeScript adds static typing that helps catch errors during development.

In this guide, we'll create a Node.js backend project from scratch using Express and TypeScript.

Prerequisites

Before starting, ensure you have installed:

Node.js
npm (comes with Node.js)
VS Code (optional but recommended)

Verify the installation:

node -v
npm -v

Step 1: Create a New Project

Create a new folder and navigate into it:

mkdir backend cd backend

Initialize a Node.js project:

npm init -y

This command creates a package.json file that manages project dependencies and scripts.

Project structure:

backend/
└── package.json

Step 2: Install Required Dependencies

Install Production Dependencies

These packages are required when the application runs in production.

npm install express cors dotenv

Package Overview

Package Purpose
express Web framework for building APIs
cors Enables Cross-Origin Resource Sharing
dotenv Loads environment variables from .env files
Install Development Dependencies

These packages help during development.

npm install -D typescript ts-node nodemon @types/node @types/express @types/cors

Package Overview

Package Purpose
typescript TypeScript compiler
ts-node Executes TypeScript directly
nodemon Automatically restarts the server
@types/node Node.js type definitions
@types/express Express type definitions
@types/cors CORS type definitions

Step 3: Initialize TypeScript

Generate the TypeScript configuration file:

npx tsc --init

This creates:

tsconfig.json

Step 4: Configure TypeScript

Replace the generated configuration with:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "CommonJS",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Important Settings
Option Description
target JavaScript version to compile into
rootDir Source code location
outDir Compiled output location
strict Enables strict type checking
esModuleInterop Supports CommonJS imports

Step 5: Create Project Structure

A clean folder structure improves maintainability and scalability.

Create the following directories:

mkdir src
mkdir src/config
mkdir src/controllers
mkdir src/middlewares
mkdir src/routes
mkdir src/services
mkdir src/utils

Resulting structure:

backend/
│
├── src/
│   ├── config/
│   ├── controllers/
│   ├── middlewares/
│   ├── routes/
│   ├── services/
│   ├── utils/
│   ├── app.ts
│   └── server.ts
│
├── package.json
├── tsconfig.json
└── .env

Step 6: Create the Express Application

Create src/app.ts.

import express from "express";
import cors from "cors";

const app = express();

app.use(cors());
app.use(express.json());

app.get("/", (_, res) => {
  res.json({
    success: true,
    message: "Server Running"
  });
});

export default app;

What Happens Here?

Creates an Express application.
Enables CORS.
Parses JSON request bodies.
Adds a test route.

Step 7: Create the Server Entry Point

Create src/server.ts.

import dotenv from "dotenv";
import app from "./app";

dotenv.config();

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Responsibilities of server.ts

Loads environment variables.
Starts the Express server.
Defines the application port.
Step 8: Create Environment Variables

Create a .env file:

PORT=5000

Using environment variables helps keep configuration separate from code.

Step 9: Configure Git Ignore

Create .gitignore.

node_modules
dist
.env

This prevents unnecessary files from being committed to version control.

Step 10: Configure Nodemon

Nodemon automatically restarts the server whenever files change.

Create nodemon.json:

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

Configuration Explanation
Property Purpose
watch Monitors source files
ext Watches TypeScript files
ignore Ignores compiled files
exec Command to run the application

Step 11: Add Scripts

Update package.json.

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

Script Explanation

Script Purpose
npm run dev Starts development server
npm run build Compiles TypeScript
npm start Runs production build

Step 12: Run the Application

Start the development server:

npm run dev
Expected output:

Server running on port 5000

Step 13: Test the API

Open your browser or API testing tool and visit:

http://localhost:5000

Response:

{
  "success": true,
  "message": "Server Running"
}

The API is now working successfully.

Step 14: Build for Production

Compile the TypeScript code:

npm run build
Generated structure:

dist/
├── app.js
└── server.js

Run the production build:

npm start

Recommended Production Packages

For real-world applications, install additional middleware:

npm install helmet morgan express-rate-limit npm install -D @types/morgan
Why Use Them?
Package Purpose
helmet Adds security headers
morgan Logs HTTP requests
express-rate-limit Protects against abuse and brute-force attacks

Recommended Scalable Folder Structure

As your project grows, consider organizing it like this:

src/
├── config/
├── controllers/
├── routes/
├── services/
├── repositories/
├── middlewares/
├── validators/
├── interfaces/
├── types/
├── utils/
├── app.ts
└── server.ts

This structure works well for REST APIs, authentication systems, AI applications, e-commerce platforms, and enterprise-level backend services.

Conclusion

By combining Node.js, Express.js, and TypeScript, you gain:

Better code quality through static typing
Improved developer experience
Easier debugging and maintenance
Scalable project architecture
Faster development workflow with Nodemon

Following the setup described in this guide provides a solid foundation for building modern backend applications, whether you're creating REST APIs, microservices, AI-powered platforms, or full-stack web applications.

推荐订阅源

DEV Community