Another ExpressJS API tutorial for 2021, part 03— Managing your user endpoints

In this third part of the articles, we would create our first CRUD endpoint for an user resource

Hi again, this is a series of articles to help you to develop an API using ExpressJS with Typescript. We’ve finished our last article configuring a Typescript project for ExpressJS. You can get the Github code here.

Just as a quick overview, here is the series of articles that we are writing:

• Create your hello world ExpressJS API (Yes… we always need to start with a hello world)
• Configure our hello world application to use Typescript (TS is cool, believe me ;) )
• Create our first CRUD API endpoints for an user (Everyone wants a registered user in their applications, no?) We are here now ;)
• Create and configure your controllers (We will talk about it after)
• Create and configure your services (What the h. is that?)
• Middleware’s! (Yes, we need and use it everyday)
• End to end testings!
• Configuring a secure way to manage user permissions via API
• Putting all together into a Docker container
• Configuring a simple MongoDB to connect to our application
• Configuring permission level to the application
• Add logs with Winston!

Let’s put our hands on the code now!

First off all, at the root of the project, let’s create a folder called common which we will share some files into the application in order to reuse code.

Now, let’s create a file called common.routes.config.ts with the following:

import express from 'express';

export class CommonRoutesConfig {
    app: express.Application;
    name: string;

constructor(app: express.Application, name: string) {
        this.app = app;
        this.name = name;
    }

getName() {
        return this.name;
    }

}

export interface configureRoutes {
}

This is not a mandatory step to create an API but I we will use this as an example on how to use extends and implements with Typescript for who is still beginning on it.

Now we will create our first endpoints. For that, let’s create at our root project a folder called users and inside of it a file called users.routes.config.ts with the following code:

import {CommonRoutesConfig, configureRoutes} from '../common/common.routes.config';
import express from 'express';

export class UsersRoutes extends CommonRoutesConfig implements configureRoutes{
    constructor(app: express.Application) {
        super(app, 'UsersRoute');
        this.configureRoutes();
    }

configureRoutes() {
        this.app.get(`/users`, (req: express.Request, res: express.Response) => {
            res.status(200).send(`List of users`);
        });

this.app.post(`/users`, (req: express.Request, res: express.Response) => {
            res.status(200).send(`Post to users`);
        });

this.app.put(`/users/:userId`, (req: express.Request, res: express.Response) => {
            res.status(200).send(`Put to ${req.params.userId}`);
        });

this.app.patch(`/users/:userId`, (req: express.Request, res: express.Response) => {
            res.status(200).send(`Patch to ${req.params.userId}`);
        });

this.app.delete(`/users/:userId`, (req: express.Request, res: express.Response) => {
            res.status(200).send(`Delete to ${req.params.userId}`);
        });

        this.app.get(`/users/:userId`, (req: express.Request, res: express.Response) => {
            res.status(200).send(`Get to ${req.params.userId}`);
        });
    }

}

We are extending the CommonRoutesConfig file in order to have access to common attributes and to avoid to code it again and again and again.

Also, we are using the implements configureRoutes to force our users routes to implement the method called configureRoutes and call it at our constructor.

We also want to receive an app that will be an express.Application and that will allow us to create some endpoints

The HTTP requests that we used are:

get: we will use this to retrieve a single resource or a list of resources

post: we will use this to create a new resource

put: we will use this to update an entire resource

patch: we will use this to update a part of a specific resource

delete: we will use this to remove a specific resource

In this article we are not implementing these endpoints but just configuring it to reply an answer showing that they are working. The description above shows a highly recommended suggestion on how to define your HTTP requests and easy it up the future code maintenance and to onboard new developers who will work within the same project.

Note: you will probably not be able to test using a browser url, since it will only requests GET methods. I would recommend for testing either postman or insomnia

The least but not last is to update our app.ts and say to it that we have new routes to be running on our API. Let’s update the app.ts as the following:

import express from 'express';
import * as http from 'http';

import {CommonRoutesConfig} from './common/common.routes.config';
import {UsersRoutes} from './users/users.routes.config';

const app: express.Application = express();
const server: http.Server = http.createServer(app);
const port = 3000;
const routes: any = [];
routes.push(new UsersRoutes(app));

app.get('/', (req: express.Request, res: express.Response) => {
    res.status(200).send(`Server running at port ${port}`)
});

server.listen(port, () => {
    console.log(`Server running at port ${port}`);
    routes.forEach((route: CommonRoutesConfig) => {
        console.log(`Routes configured for ${route.getName()}`);
    });
});

We created an array called routes which we will be adding new routes there. After server.listen will callback our function we will be printing at the console the route name to be sure that everything is working as expected.

As for testing, we just need to run at our terminal npm start and open either insomnia/postman and try a get, post, put, delete to see the console logs for:

get to localhost:3000/users

post to localhost:3000/users

put to localhost:3000/users/:userId

patch to localhost:3000/users/:userId

delete to localhost:3000/users/:userId

get to localhost:3000/users/:userId

Remember to change :userId to any random character that you want by this time. In the future articles we will implement and control the :userId

The next article we will be talking about controllers and a suggestion to how to use and implement them to easy it up our coding for the future.

Thanks for reading and see you at the next article!

tips:

• the full code of this article is HERE
• don’t forget to use a nice app to test your API such as Postman or Insomnia
• I know you still didn’t… Read the ExpressJS documentation!
• Book suggestion: Clean Code and again Design Patterns
• Brazilian? PT-BR Book suggestion: Clean Code and Design Patterns
• Complete project is here!