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.
