Setting Up an Express TypeScript Server: A Step-by-Step Guide

Express is a fast, minimalist web framework for Node.js, and combining it with TypeScript brings type safety and better tooling to your server-side development. In this blog, I'll walk you through setting up a basic Express server with TypeScript from scratch. By the end, you'll have a working server with proper configuration, ready for building robust APIs.

---

Prerequisites

Before we dive in, ensure you have the following installed:

• Node.js (v16 or higher recommended)

• npm

• A code editor like VS Code or any one that you feel comfortable with

• Basic knowledge of TypeScript and Express

---

Step 1: Initialize Your Project

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

This creates a folder named express-ts-server and a package.json file with default settings.

---

Step 2: Install Dependencies

Install the necessary dependencies for Express and TypeScript:

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

Explanation of Dependencies

• express: The Express framework for building the server.

• typescript: The TypeScript compiler.

• @types/node and @types/express: Type definitions for Node.js and Express to ensure TypeScript compatibility.

• ts-node: Allows running TypeScript files directly without pre-compiling.

• nodemon: Automatically restarts the server during development when files change.

---

Step 3: Set Up TypeScript Configuration

Create a tsconfig.json file to configure TypeScript. Run the following command to generate a basic configuration:

npx tsc --init

Modify the tsconfig.json file to include the following settings:

{
  "compilerOptions": {
    "module": "commonjs",                                
    "rootDir": "./src",
    "outDir": "./dist",  
    "moduleResolution": "node10", 
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
}

Key Settings

• target: Specifies the ECMAScript version (ES2020 is modern and widely supported).

• module: Uses CommonJS for Node.js compatibility.

• outDir: Outputs compiled JavaScript to the dist folder.

• rootDir: Keeps source files in the src folder. It can be any folder of your choosing.

• strict: Enables strict type-checking for better code quality.

---

Step 4: Set Up Project Structure

Create a src directory to hold your TypeScript files:

mkdir src
touch src/server.ts

Your project structure should look like this:

express-ts-server/
├── node_modules/
├── src/
│   └── server.ts
├── package.json
├── tsconfig.json

If its not, go back to the previous steps.

---

Step 5: Create the Express Server

Open src/server.ts and add the following code to set up a basic Express server:

import express, { Application, Request, Response } from "express";

const app: Application = express();
const port = 3000; // The port your express server will be running on.

// Enable URL-encoded form data parsing
app.use(express.urlencoded({ extended: true }));

// Middleware to parse JSON bodies
app.use(express.json());

// Basic route
app.get('/', (req: Request, res: Response) => {
  res.send('Hello, TypeScript + Express!');
});

// Start the server
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Explanation

• We import express and the Application, Request and Response types from Express.

• The server listens on port 3000.

• A simple GET route at / responds with a greeting.

• express.urlencoded({ extended: true }) middleware that parses incoming requests with URL-encoded payloads

• express.json() middleware that parses incoming JSON requests.

---

Step 6: Configure Scripts in package.json

Update the scripts section in package.json to simplify development and building:

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

Script Details

• start: Runs the compiled JavaScript code.

• build: Compiles TypeScript to JavaScript in the dist folder,set in your tsconfig.json.

• dev: Uses nodemon to run the server and auto-restart on changes.

---

Step 7: Test the Server

Run the development server:

npm run dev

You should see:

Server is running on http://localhost:3000

Open your browser or use a tool like Postman to visit http://localhost:3000. You should see:

Hello, TypeScript + Express!

---

Step 8: Build for Production

To compile your TypeScript code to JavaScript for production:

npm run build

This generates a dist folder with compiled JavaScript. Run the production server:

npm start

Conclusion

You now have a fully functional Express server with TypeScript! This setup provides a solid foundation for building scalable APIs with type safety. From here, you can add more routes, connect to a database, or deploy to a platform like Railway or Render.

The full code is here.