How to Create a Boilerplate in TypeScript With Node Package Manager, MongoDB, Express, Node, and Redis
Set yourself up a fresh new back-end app with all of these technologies
Boilerplate is the base of an application. The codes which are going to be reused are well defined beforehand, and it is a good coding practice to use proper functions, enumerations, and use descriptive coding strategy.
With this, your basic backend server will be created. The only thing you will need to add will be the logic of your project.
Some necessary items or criteria a boilerplate must contain or satisfy:
- Good and readable documentation
- Code structure with a deeper abstraction level
- Follows proper coding standards
- Has CLI tool (for rapid prototyping and setup)
- Scalable
- Easy testing tools
- Necessary API modules
- Support for internationalization and localization
- Code splitting
- Server and client code for setup
- Proper navigation and routing structure
Today, we will learn how to create a boilerplate and set up a base for the back end using TypeScript, Node, and Express. We’ll also configure it for MongoDB with PM2 — Process Manager will be used to make sure the server stays on and there is no failure.
This tutorial assumes that you have your Redis server and Mongo already set up.
We will create an app and install all the required packages in one go. I am providing you with the package.json file. Use npm install to install all the packages in one go. You can install them manually too. You might need some of the packages like pm2 to be installed globally. Make sure every package is installed without any error.
The package.json file goes as follows:
Change the scripts as indicated in the package.json file. We will follow this in the tutorial. You can always change it to whatever you are comfortable with.
Now the first file we will create is ecosystem.config.js. This file is responsible for your configuration of the PM2 library that will handle the server execution, which is in a cluster in the file. Four instances of a server will be created with automatic load balancing between the instances.
We need a .gitignore file. You can copy it as shown below:
It is now very important to set up the file called tsconfig.json. This file defines the usage of TypeScript instead of JavaScript. What exactly happens is this JSON file gives the configuration to convert the TypeScript code to JavaScript ES6 code. Here, we refer to a file called types.ts. We can define the interface for all the requests we want to make to it in the future. We will define that types.ts later.
We will make sure our lint does not work on a few of the files, like the distribution build or the public folder. We will create two files (.eslintignore and .eslintrc.yaml) and add the following code to them:
So, we have created all the required configuration files for our application. All the files above were created at the root of the project folder. It might look something like this:
We will now start creating the basic structure of our source code for the back end and define basic functions to be used again and again. We will also look into many more things to avoid type errors and create manageable code.
Let us start by creating a folder named src. In this folder, we will create server.ts, our main server file. The use of each instruction is given in the comments above it. We are using a lot of variables in this that have to be defined in a common config file. Let’s do that:
We will create a folder named common beside src. This folder will contain three files: config.ts, messages.ts, and response.ts. As the names suggest, we will have all the common configurations in config.ts. We will have all the messages defined in messages.ts, where we can get a string with respect to an error code, a welcome message, task completion, or failure. In response.ts, we have all the HTTP status codes defined with their strings by their side.
We have successfully set up the common folder. Now, we can go to our utils folder, where we will define the basic functions to use different services, caching mechanisms, or packages involved all over the application.
We will first set up a logger in the logger.ts file in the utils folder.
Now, we will create platform.ts with all the utility functions to check validity, perform encryption-decryption, and other common functions. You can add more functions to it as per your usage.
Further, we will set up Redis (the caching library we will be using). For that, we will create redis.ts in the utils folder.
Now we will define routes.ts. This file is created beside server.ts. You need to define your API routes over here.
We are in the last part of our boilerplate. Here, we will create the app folder. This folder will contain the basic CRUD operation for Mongo, the models of the Mongo, and you can add your controllers to this folder by creating another folder in it.
Let’s create a folder in the app folder — namely models. This will contain types.ts and response.ts. Here, response.ts defines the interface of the HTTP response. As mentioned above, types.ts defines the interface of the requests.
Now we will create the last file of our boilerplate, crud.ts. This will contain all the create operations, find operations, and delete operations defined. Just pass the model in the function with the relevant value and you can work with Mongo without typing the functions again and again. We will create this file in a folder called mongo in the app folder. All of the error-handling is already implemented.
The directory must look something like this. If you have changed the name of any folder or file, make sure it was changed everywhere it was used.
Should we try running our server?
Create a build with npm run-script build. You might get some errors. This is natural because the back end is still not complete and a lot of stuff is yet to be done to create a full-fledged back end.
Start your server with pm2 start.
You can stop your server with pm2 stop all.
Or you can start the single instance with npm run serve.
Don't forget to start your MongoDB instance and Redis server!
