DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Create Express Typescript Boilerplate
Dantis Mai
Dantis Mai

Posted on • Updated on

Create Express Typescript Boilerplate

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
image

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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 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
    image

  • If you ask about errorhandler middleware, I have an example for you below. And about @controller, it depends on your domain business.
    image

  • 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"
Enter fullscreen mode Exit fullscreen mode
  • Try npm start to make sure it can start the server successfully
    image

  • Add Unit tests to make sure everything works as expected. In case you followed my configuration in this post, 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 to test my express server, you can make this page as your reference
    image
    image
    image

  • 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

Mark repository as template

Finally, we come to the last part. After access our repository on github, we tick the box template repository in tab setting
image
CONGRATULATION!!! EXPRESS TYPESCRIPT BOILERPLATE ACHIEVED

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

image
This is my Template, I am glad if you give me a star 😍.
And here 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

Paypal.

I am really happy to receive your feedback on this article. Thanks for your precious time reading this.

Top comments (4)

Collapse
 
msamgan profile image
Mohammed Samgan Khan

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/

Collapse
 
konferbe profile image
Steve Lebleu

Hi there ! Thanks for sharing ! Here is another package to start with express, typescript and typeorm:

GitHub logo konfer-be / typeplate

REST API boilerplate with Typescript, Express.js, Typeorm and Mocha.

Typescript / Express / Typeorm REST API boilerplate

Node TypeScript Express Typeorm Mocha

Build Coverage Status CodeFactor Grade Requires.io (branch) Snyk Vulnerabilities for GitHub Repo

MIT Licence

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

  • Basics
    • Clear & clean code architecture with classic layers such controllers, services, repositories, models, ...
    • Object Relational Mapping with typeorm.
    • Entity generation with rsgen.
    • Business validation with self designed business members.
    • Logs management with morgan and winston.
    • Changelog completion with auto-changelog.
    • Testing with included unit and e2e test sets builded with mocha, chai, sinon and supertest.
    • Documentation with api-doc.
  • Security
    • SSL secure connection with native HTTPS node module.
    • Cross Origin Resource Sharing with CORS.
    • Securized HTTP headers with helmet.
    • HTTP header pollution preventing with hpp.
    • API request rate limit with express-rate-limit.
    • Route validation with joi.
    • HTTP friendly errors with boom and…




Collapse
 
maithanhdanh profile image
Dantis Mai Author

that is huge template!!! πŸš€

Collapse
 
hedwardd profile image
Heath Daniel

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.

πŸ” If you came here from Google, why not take a look at some of our top posts?