FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Upgrade
Welcome to FullStack Labs. We use cookies to enable better features on our website. Cookies help us tailor content to your interests and locations and provide many other benefits of the site. For more information, please see our Cookies Policy and Privacy Policy.

Benefits of Using the express-generator-typescript Module

Written by 
Sean Maxwell
,
Senior Software Engineer
Benefits of Using the express-generator-typescript Module
blog post background
Recent Posts
Getting Started with Single Sign-On
Choosing the Right State Management Tool for Your React Apps
Accessibility in Focus: The Intersection of Screen Readers, Keyboards, and QA Testing

Table of contents

I love Node.js and use it for the back-end on all of my side projects and have been using TypeScript with it ever since I started using Node. There are plenty of articles out there explaining how to set up a Node.js API with TypeScript. As a serial side-project maker, though, I had to repeat a lot of steps manually with every new project. So, I decided to automate this process by making my own npm library, Express-Generator-TypeScript.

Overview

Basically, what Express-Generator-TypeScript does is allow you to spin up a new Express.js web-server fully configured with TypeScript. The linter, logging tool, build scripts, and even a unit-testing framework are all set up for you, as well as the latest version of all the libraries is downloaded for you. Here’s a list of some of its benefits:

  • Adds and configures nodemon for the development environment so your server reloads on code changes.
  • Sets up the linter and provides some common default settings.
  • Sets up logging.
  • Loads environment files for development, testing, and production environments. You can easily add your own as needed.
  • Provides unit-tests for every express route using Jasmine as the framework.
  • Provides type-safe express request and response objects that can be updated over time as your req.body and res.objects grow.
  • Adds build scripts.
  • Sets up TSconfig paths so you can easily access content throughout the project.

Usage

Getting started

To start a new project with Express-Generator-TypeScript (assuming you already have Node.js/npm/npx installed), all you have to do is run its npx "optional project name" and bam! That’s it! If you don’t enter a project name, the default "express-gen-ts" will be used.

Project Breakdown

When you open up the project folder, you’ll see the src/and spec/folders and a bunch of configuration files.

The src/ folder contains, of course, your source code, and the spec/ folder contains unit-tests. To start the server in development mode, at the root directory of a command prompt, run the command "npm run start:dev". This will run the typescript source files directly with ts-node. To run the project for production, you will need to build it first with npm run build. This will create a dist/folder with the transpiled.js files. To run the server for production, do npm run start.

The folders under src/ are pretty self-explanatory in what they do, but I want to mention the daos/ folder because I’ve been asked a lot about it before. DAO stands for Data-Access-Object, and this is where you want to put all your database queries. Wrapping database queries in a dao layer is generally a good idea because it allows you to avoid repeating code, more easily mock database calls for unit-tests, uphold the separation of concerns principle, and swap out different databases later if you should choose to do so.

To run unit-tests, simply do "npm run test". There is an existing unit-test, written in TypeScript, for each default route. Nodemon is also configured for unit-tests, but if you want to run tests without hot-reloading, you can do "npm run test: no-reloading."

The Front End

When you create a new project, if you navigate to localhost:3000 (or localhost:8081 for production) in a browser, you will see this:

Right now, a.json file in the dao/ folder will be used as a mock database. Due to the popularity of SPAs these days, the amount of front-end code is very minimal and is not set up with TypeScript or any other superset languages. The purpose of this view right here is just to give you a demo of the GET, POST, PUT, and DELETE routes.

Optional Features

There are two significant optional features you can choose when setting up a new project. Should your project require them, they will save you a significant amount of configuration time. The first option sets up authentication for your server.

Authentication

The "with-auth" option sets up a new sample project complete with production quality authentication. It uses a json-web-token for client-side authentication and requires you to login before you can access the standard user routes. This option also adds json-web-tokens and checks for them when running the unit tests. The full command to use this option is: npx Express-Generator-TypesScript—with-auth "project name".

You’ll see this image when navigating to localhost:3000 using the with --with-auth option.

Socket-io

Socket-io is a very popular event-listener library used frequently for chat apps, user logins, etc. Like authentication, this requires a lot of initial setup. Because so many of my side projects have used socket-io, I just decided to include this as a little bonus option. If you ever create a website that involves collaboration between multiple users (i.e. a project planning tool), there’s a good chance you’ll end up using socket-io.

To use the socket-io option enter: npx express-generator-typescript –socket-io “project name”. This option also includes all the authentication features. After logging in you will see this at localhost:3000/chat:

Final Notes

Even if you already have an existing Express/Typescript project, express-generator-typescript can still be useful if you are trying to learn how to set up authentication or socket-io for your site and run unit-tests on them.

This library uses the bcrypt module for authentication, which can be fussy on Windows. It is highly recommended that you use this via wsl2 if you are on Windows, because bcrypt (and some other NodeJS features) requires something called Windows Build Tools to be set up.

Additionally, if you want to use a front-end framework such as Angular or React, simply generate a new project using their command lines and replace the front-end/ folder under src/ with the new folder.

Sean Maxwell
Written by
Sean Maxwell
Sean Maxwell

Sean is a Senior Software Engineer at FullStack Labs. He has ample experience working on UI development, API development, and web development. As a FullStack developer, Sean is an expert in React, Java, Node, CSS, and TypeScript. He is based in Seattle and holds a bachelor's degree in Computer Science by the University of Washington Bothell.

People having a meeting on a glass room.
Join Our Team
We are looking for developers committed to writing the best code and deploying flawless apps in a small team setting.
view careers
Desktop screens shown as slices from a top angle.
Case Studies
It's not only about results, it's also about how we helped our clients get there and achieve their goals.
view case studies
Phone with an app screen on it.
Our Playbook
Our step-by-step process for designing, developing, and maintaining exceptional custom software solutions.
VIEW OUR playbook
FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project.
Engagements start at $75,000.