Create an Express Boilerplate with TypeScript

The bare minimum to get started with a backend API

Photo by Marvin Meyer on Unsplash

Express is the most popular framework for Node.js applications. It’s very versatile and offers no restrictions. So you can do whatever you want and design your application however you like.

Today we will use Express to create an HTTP server that can expect requests and see how to set it up with the required middlewares properly.

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

Before we begin…

I have created a professional boilerplate with ExpressJS and Typescript. This article is a part of this series. You can find all the articles below.

Let’s begin!

Get the Node.js boilerplate

Let’s first clone the boilerplate repository where we have a working Node.js application with TypeScript, ESLint, and Prettier already set up. We will integrate Express on top of this.

Install the dependencies

Then go inside the project and install the dependencies:

cd nodejs-typescript-skeleton
yarn add Express

And also, add the type definitions for the Express module:

yarn add -D @types/express

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();

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!",
  });
});

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}`);
}

And then run the application:

yarn dev

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

{ "message": "Hello World!" }

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

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 }));

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!",
  });
});

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

req.body;

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.

Hope you learned something new today. Have a Great Day!

Want to Connect?

You can reach out to me via LinkedIn or my Personal Website.

Github Repository

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Check out our Community Discord and join our Talent Collective.