DEV Community

Mohammad Faisal
Mohammad Faisal

Posted on • Edited on • Originally published at mdfaisal.com

4 1

Create a Modern Express Boilerplate with Typescript

To read more articles like this, visit my blog

ExpressJS is the most popular framework for NodeJS applications. It's very versatile and offers no restrictions. So you can do whatever you want and design your application however you like.

You can refer to the following article if you want a boilerplate without ExpressJS support.

https://www.mdfaisal.com/blog/create-nodejs-typescript-boilerplate

Get the NodeJS boilerplate

Let's first clone the boilerplate repository where we have a working NodeJS application with Typescript, EsLint, and Prettier already set up.
We will integrate Express on top of this.

git clone https://github.com/Mohammad-Faisal/nodejs-typescript-skeleton.git
Enter fullscreen mode Exit fullscreen mode

Install the dependencies

Then go inside the project and install the dependencies.

cd nodejs-typescript-skeleton
yarn add Express
Enter fullscreen mode Exit fullscreen mode

And also, add the type definitions for the express module.

yarn add -D @types/express
Enter fullscreen mode Exit fullscreen mode

Test it out!

Go inside the src/index.ts file, import the dependencies, and create a basic express application.

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

const app: Application = express();
Enter fullscreen mode Exit fullscreen mode

Then let's create a basic route that will accept a GET request and return a result.

app.get("/", async (req: Request, res: Response): Promise<Response> => {
  return res.status(200).send({
    message: "Hello World!",
  });
});
Enter fullscreen mode Exit fullscreen mode

Then start the server on port 3000;

const PORT = 3000;

try {
  app.listen(PORT, (): void => {
    console.log(`Connected successfully on port ${PORT}`);
  });
} catch (error: any) {
  console.error(`Error occured: ${error.message}`);
}
Enter fullscreen mode Exit fullscreen mode

And then run the application.

yarn dev
Enter fullscreen mode Exit fullscreen mode

Go ahead and hit the following URL http://localhost:3000/, and you should be greeted with the following response.

{ "message": "Hello World!" }
Enter fullscreen mode Exit fullscreen mode

Add Bodyparser

Now, this is the bare minimum to get started with Express. But in real life, we need a couple of things to get the server working properly.

to handle HTTP POST requests in Express, we need to install a middleware module body-parser

Let's install it first.

yarn add body-parser
yarn add -D @types/body-parser
Enter fullscreen mode Exit fullscreen mode

Then use it inside the index.ts file.

import bodyParser from "body-parser";

const app: Application = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
Enter fullscreen mode Exit fullscreen mode

And add another route to handle HTTP POST requests.

app.post("/post", async (req: Request, res: Response): Promise<Response> => {
  console.log(req.body);
  return res.status(200).send({
    message: "Hello World from post!",
  });
});
Enter fullscreen mode Exit fullscreen mode

You will notice that inside the route handler, we can get the body of the request by

req.body;
Enter fullscreen mode Exit fullscreen mode

It's possible because of the use of body-parser

Conclusion

That's it. Now you have a basic express application that can expect HTTP requests.

Github Repository

https://github.com/Mohammad-Faisal/express-typescript-skeleton

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️