Typescript ExpressJS API with webpack

4 min readOct 4, 2017

When creating any API in node, I like to have a common scaffolding and delve directly into the code. Of course, every six months, a new framework comes, the stack changes and we need a new scaffolding.

In this tutorial, we will create a simple ExpressJS API with Typescript. Tests will be supported with Jest and Mocha/Chai.

If you use heroku and coveralls, you can even plug it to the app.

TL;DR
Check out https://github.com/anthillsolutions/api-skel for the whole package.

Initialisation

For the purpose of the tutorial, we will create an API with only one route:
GET / and it will output the following:

{“message”:”Welcome to API sekeleton.”,”version”:”1.0.0"}

Let’s init the repository:

$ mkdir tutorial
$ cd tutorial
$ npm init

You will be prompted with some additional information to fill.

Scaffolding creation

Our project structure is as follow (there might better structures out there):

|-> /tutorial
|---> /server
|-----> /controllers
|---> /tests$ mkdir -p server/controllers tests

Install the necessary packages.

yarn add -D webpack typescript tslint ts-node ts-loader

Now we need the webpack configuration:

The configuration is quite simple. Don’t forget to add target: 'node' enabling webpack to work for node environment.
externals: nodeModules is here suppressing a warning explained on the James Long’s blog.

We also need to configure Typescript:

Note: in compilerOptions/paths/* types paths are added. So, if you need custom types, you can add them in ./server/types.

Code creation

Now that the scaffolding is ready, we can concentrate on our API.
We need those packages:

$ yarn add dotenv express body-parser
$ yarn add -D @types/body-parser @types/express @types/dotenv

dotenv is pretty handy for handling environment variables;
express is our main package for handling http requets;
body-parser is needed for json content.

We create the controller for the first route:

And the server:

Run

$ yarn && ./node_modules/webpack/bin/webpack.js
$ node ./dist/server.js

If everything is set properly, you will see:

App is running at http://localhost:3000 in development mode
Press CTRL-C to stop

Hooza! We have a minimalist API in ExpressJS written in Typescript.

Note: If you are not thrilled with ./node_modules/webpack/bin/webpack.js you can install globally webpack.

$ npm install -g webpack

We can set up package.json for this:

"scripts": {
  "build": "webpack --config webpack.config.js",
  "start": "npm run build && node ./dist/server.js"
}

Tests — preparation

Any good program should have its tests. We will use Jest from facebook. It alleviates a lot of pain.

Some preparation first:

$ yarn add -D jest @types/jest ts-jest

Note: we can add jest globally.

$ npm install -g jest

We will use also supertest, mocha and chai:

$ yarn add -D supertest @types/supertest mocha chai @types/chai

Jest needs a bit of configuration, so we need to add in package.json the following:

These options will cover any code written in Typescript in our project.

Tests — writing

Hopefully, our code base is small. We will write one simple test.

Supertest will launch the server in a test mode and will perform any call written in the test suite. In this instance, we check when we call GET / that there is the property message.

$ jest

Coverage

Let’s add coverage to the process. Jest is shipped with coverage options. We just need to update package.json.

Coveralls

Let’s show to world that we are thorough with our code and send the result to coveralls. For this, we need node-coverall and have a dedicated script.