Create Web Api with NodeJs, TypeScript and Express

Introduction

In this tutorial I would like to show how you can start building your NodeJS API with TypeScript and Express. Basically we will try to create a boilerplate which you will be able to expend as much as needed for your own project.

For this course we will need install the following:

• Latest NodeJS – https://nodejs.dev/
• NPM package manager – https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
• Yarn package manager (optional, but I will be using yarn) – https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable
• Microsoft VS Code – https://code.visualstudio.com/

Create a package.json file

Create a new folder, open it in VS Code and run the following command in terminal

npm init

Answer all questions as you wish. At the end it should generate package.json file like this:

{
  "name": "my_web_api",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Add TypeScript support

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. To enable TypeScript on a project we will need 2 packages:

• typescript – this is a core library

• ts-node – TypeScript execution and REPL for node.js, with source map and native ESM support.

Install these 2 packages to the dev dependecies with the following command:

yarn add -D typescript ts-node

We also need to create tsconfig.json in a root folder. It will allow to compile typescript code into javascript.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "./",
    "outDir": "./build",
    "esModuleInterop": true,
    "strict": true
  }
}

Install Express and declarations

Now we need to install the actual library of express. You can do it with the following command:

yarn add express

We will also need to add declarations for the typescript.

yarn add -D @types/node @types/express

Create an express web api server

Our initial configuration is done and we can start creating the actual web api express server. First of all create an index.ts file in a root. Add the following code:

import express from 'express';

const app = express();

app.get('/', function (req, res) {
  res.send('Hello World');
});

app.listen(3000);

This code will create express server on port 3000. Also we are registering an endpoint that will return Hello world on http://localhost:3000

Configure nodemon

nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

To install nodemon run the following code:

yarn add nodemon

After that you will need to update your package.json filw to ass the following statement to scripts object: “start”: “nodemon index.ts”

After that your package.json should look like this:

{
  "name": "my_web_api",
  "version": "0.0.1",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "start": "nodemon index.ts",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^17.0.12",
    "nodemon": "^2.0.15",
    "ts-node": "^10.4.0",
    "typescript": "^4.5.5"
  },
  "dependencies": {
    "express": "^4.17.2"
  }
}

Run the server

That’s it! To run the server, execute the following command in terminal:

yarn start

and navigate to http://localhost:3000/

You should see a Hello World back