DEV Community

Cover image for Complete Guide: Setting Up a Node.js + Express + TypeScript Project
Sivasakthi Paramasivam
Sivasakthi Paramasivam

Posted on

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Project structure:

backend/
└── package.json
Enter fullscreen mode Exit fullscreen mode

Step 2: Install Required Dependencies

Install Production Dependencies

These packages are required when the application runs in production.

npm install express cors dotenv

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

This creates:

tsconfig.json

Enter fullscreen mode Exit fullscreen mode

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"]
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Resulting structure:

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

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;
Enter fullscreen mode Exit fullscreen mode

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}`);
});
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Using environment variables helps keep configuration separate from code.

Step 9: Configure Git Ignore

Create .gitignore.

node_modules
dist
.env
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Step 13: Test the API

Open your browser or API testing tool and visit:

http://localhost:5000

Enter fullscreen mode Exit fullscreen mode

Response:

{
  "success": true,
  "message": "Server Running"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Run the production build:

npm start

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)