Create Express Typescript Boilerplate
Tags: express, node, typescript
Published: 2021-09-11 12:03:05

##What is Git Template?
[Git Template](https://git-template.readthedocs.io/en/latest/) is a frame for us to make numerous clones with the same configuration

##Create boilerplate
###Init git repository
Depends on familiarity, we can init repository by using [Git Interface](https://github.com/new) then clone it back or executing [Git CLI](https://git-scm.com/docs/git-init) on local folder.

###Add configuration
First of all, we need to **initialize nodejs project** by answering some questions  after executing the command `npm init`
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezti07t2flrxso6xh9ng.png)

Then we install [Typescript](https://www.npmjs.com/package/typescript) by `npm` or `yarn`. I suggest installing it with `--save-dev` flag, because usually, the production package is built to **Javascript***
```
#For npm
npm install --save-dev typescript

#For yarn
yarn add --dev typescript
```

Now, we need to config our project. If you have followed me until this post, you will have the configuration of [tsconfig.json](https://dev.to/maithanhdanh/configuration-for-tsconfig-json-3bg5), [Prettier](https://dev.to/maithanhdanh/configuration-for-prettier-14g1), [ESLint](https://dev.to/maithanhdanh/configuration-for-eslint-b47), [Jest](https://dev.to/maithanhdanh/configuration-for-javascript-testing-framework-jl1), and [Husky](https://dev.to/maithanhdanh/configuration-for-husky-pre-commit-1fo5)

We come to the main guy, **Express server**
- Install [Express](https://www.npmjs.com/package/express) module. As I mentioned in [Jest](https://dev.to/maithanhdanh/configuration-for-javascript-testing-framework-jl1), **Express** can't understand TS, so we need an additional module,**ts-node**, to run the server on local, and 2 other modules **@types/express**, **@types/node** to get types of **Express**.

```
npm install express
npm install --save-dev @types/express @types/node ts-node
```

- There are some other ones you may need [nodemon](https://www.npmjs.com/package/nodemon) for watching the changes in the resource folder, [dotenv](https://www.npmjs.com/package/dotenv) for loading environment variables files, or [cors](https://www.npmjs.com/package/cors) for solving error "access-control-allow-origin".

- Create our **server**. From my experience, we need to create 2 files in `src` folder placed at root level. The first one is `src/config/express.ts` which is used to config our express server, and the second one is `src/index.ts` for starting the server. If we merge 2 of those files, we will violate the **SOLID** theory.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jqh789motjw93pror81.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7kjri5vszkfw3n0w4dr.png) 
 
- If you ask about `errorhandler` middleware, I have an example for you below. And about `@controller`, it depends on your domain business.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f94q6q8enkd1omnxkuey.png)
 
- Add scripts to `package.json` to start server. Thanks to `ts-node` we can directly start server without continuous complier.
```
"start": "ts-node -r tsconfig-paths/register src/index"
```
- Try `npm start` to make sure it can start the server successfully
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rw1uoj0nx9llk98xpo6.png)

- Add **Unit tests** to make sure everything works as expected. In case you followed my configuration in this [post](https://dev.to/maithanhdanh/configuration-for-javascript-testing-framework-jl1), then push test files into folder `__tests__` placed at root level with the same location in `src` (your folder tree will look like below). I love using [supertest](https://www.npmjs.com/package/supertest) to test my express server, you can make this [page](https://www.albertgao.xyz/2017/05/24/how-to-test-expressjs-with-jest-and-supertest/) as your reference
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kju7jqs3yh9oepc0777.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8d1gj71p1s9hwaqkpb9c.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzzw7n1nerio8q51k76g.png)

- Now we can try to commit the changes to init our repository. If we config `Husky`, then it will run `npm test` before actually commit
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uijd9rycullsi9pzi3nd.png)

###Mark repository as template
Finally, we come to the last part. After access our repository on [github](https://github.com/), we tick the box **template repository** in tab **setting**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvkmjqhjirq5b5qxjl67.png)
**CONGRATULATION!!! EXPRESS TYPESCRIPT BOILERPLATE ACHIEVED**

You can try to use it by clicking on **Repository template** on **New repository** page

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dms70q4vf3ihcpa4e0y1.png)
This is my [Template](https://github.com/Maithanhdanh/express-typescript-boilerplate), I am glad if you give me a star 😍.
And [here](https://www.npmjs.com/package/typescript-maker) is my brand new npm 😍.
 
_We have gone on a long journey with the **Create Your Own TypeScript Express Template** series. Thank you very much. If You need GitHub template, you can refer [here](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/creating-a-repository-from-a-template)_

[Paypal](https://paypal.me/DantisMai).
    
_I am really happy to receive your feedback on this article. Thanks for your precious time reading this._