What is Git Template?
Git Template 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 then clone it back or executing Git CLI on local folder.
Add configuration
First of all, we need to initialize nodejs project by answering some questions after executing the command npm init
Then we install 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, Prettier, ESLint, Jest, and Husky
We come to the main guy, Express server
- Install Express module. As I mentioned in Jest, 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 for watching the changes in the resource folder, dotenv for loading environment variables files, or 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 issrc/config/express.ts
which is used to config our express server, and the second one issrc/index.ts
for starting the server. If we merge 2 of those files, we will violate the SOLID theory.
If you ask about
errorhandler
middleware, I have an example for you below. And about@controller
, it depends on your domain business.
-
Add scripts to
package.json
to start server. Thanks tots-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._
Top comments (4)
This was great but it would be so much better if you included the code instead of pics of the code. Either way, great job and thanks for making this.
hey dantis, nice work.
here is a similar et up for the same, providing support for vanila JS and typscript both,
check it out create-express-boilerplate.com/
Hi there ! Thanks for sharing ! Here is another package to start with express, typescript and typeorm:
konfer-be / typeplate
REST API boilerplate with Typescript, Express.js, Typeorm and Mocha.
Ready to use RESTful API boilerplate builded with Express.js, Typescript TypeORM and Mocha.π€
Thanks to Daniel F. Sousa for inspiration with her Express ES2017 REST API boilerplateπΊ πΊ πΊ
> Features
that is huge template!!! π