Express.js: Setting Up the Project in VS Code

In this post, we’ll walk through setting up a new Express.js project using Visual Studio Code, with TypeScript for type safety. This includes initializing a Node.js project, installing Express, and configuring TypeScript.

Prerequisites

Before starting, ensure you have:

Node.js (latest LTS version recommended)
Visual Studio Code (VS Code)
TypeScript installed globally: Run npm install -g typescript

Step 1: Initialize a New Node.js Project

Create a New Directory
Open a terminal and create a directory for your project:
```
 mkdir my-express-app
 cd my-express-app
```
Initialize the Project
Inside your project directory, run:
```
 npm init -y
```
This generates a package.json file with default settings.

Step 2: Install Express.js and TypeScript

Now, install Express and TypeScript along with type definitions for Node and Express:

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

This command installs Express and adds TypeScript and necessary types to devDependencies.

Step 3: Configure TypeScript

Create a tsconfig.json file to configure TypeScript:

npx tsc --init

Edit tsconfig.json to ensure these settings:

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

Step 4: Set Up the Project Structure

Create the following structure in your project directory:

my-express-app
│
├── package.json
├── tsconfig.json
├── src
│   ├── server.ts
│   ├── routes
│   │   └── index.ts
│   └── controllers

src/server.ts: Main file to start the server.
src/routes/index.ts: Route definitions.
src/controllers: Holds controller logic.

Step 5: Create the Server in `src/server.ts`

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

import express, { Request, Response } from 'express';

const app = express();
const PORT = process.env.PORT || 3000;

// Middleware for JSON parsing
app.use(express.json());

// Basic route
app.get('/', (req: Request, res: Response) => {
    res.send('Welcome to My Express App with TypeScript!');
});

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

Step 6: Define Routes in `src/routes/index.ts`

In src/routes/index.ts, define your routes:

import { Router, Request, Response } from 'express';

const router = Router();

router.get('/', (req: Request, res: Response) => {
    res.send('Hello from the home route!');
});

export default router;

Import and mount the route in src/server.ts:

import routes from './routes/index';
app.use('/', routes);

Step 7: Compile and Run the Project

To compile TypeScript to JavaScript, run:

npx tsc

Then, start the server:

node dist/server.js

Visit http://localhost:3000 in your browser to see the message confirming your server is running.

Conclusion

Now, you have a basic Express.js project set up with TypeScript in VS Code. This structure is easy to expand as you add more routes, middleware, and business logic.