[Framework Tutorial 2] - Set up Express server with TypeScript for dapp back-end

[Framework Tutorial 2] - Set up Express server with TypeScript for dapp back-end

The goal of this tutorial is to prepare a back-end scaffold for a dapp on the Ethereum blockchain using the 0xcert Framework that we'll build in the following tutorials. To learn how to come to this point, please check the previous tutorial.

In this tutorial, we will:

  • Initialize a node project
  • Set up TypeScript
  • Set up Express server with TypeScript

At the end of the tutorial, we will have a working Express server scaffold.

To achieve this, we will use the following technologies:

  • TypeScript
  • Node.js
  • Express

It is assumed that you know the basics of JavaScript, Node.js, and use of the terminal.

All the code used for the examples can be found on GitHub.

Build your own dapp

1. Set up project and dependencies

We assume you have Node.js installed. We will first create our project directory and initialize npm.

$ mkdir ethereum-example
$ cd ethereum-example
$ npm init

Now, we will install all the required dependencies. First, we install Express which will run our API:

$ npm install express

Next, we install TypeScript (we only need it as dev dependency since after it transpiles to JavaScript, it is no longer needed):

$ npm install --save-dev typescript

Thirdly, we need to update our project so that TypeScript is able to handle type declarations for Express and Node.js:

$ npm install --save-dev @types/node @types/express

Then, we install body-parser which will help us parse JSON data in Express:

$ npm install body-parser

2. Run Express with TypeScript

Since we are running Express with TypeScript, it needs a bit different set-up than the hello world example on their website. Here is that same example in TypeScript:

import * as express from 'express';
const app = express();
const port = 3000;
app.get('/', (req, res) => {
  res.send('Hello World!')
});
app.listen(port, () => {
  console.log(`Example app listening on port ${port}!`);
});

Let's create a folder called src with a file index.ts inside it and paste the above example into it.

Before running Express, we still need to configure both TypeScript and our project. So let's first create a file called tsconfig.json in our root folder and add the config:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": true,
    "outDir": "dist",
    "declaration": true,
  }
}

This config tells TypeScript how to compile to JavaScript. In the config above, we specified the output folder for JavaScript files to be dist. Now, we need to update package.json so it knows how to run TypeScript to JavaScript compilation, and how to start the Express server. For this, we will need to update main and scripts sections as follows:

"main": "dist/index.js",
"scripts": {
    "build": "tsc",
    "prestart": "npm run build",
    "start": "node .",
    "test": "echo \"Error: no test specified\" && exit 1"
}

Now, we set that the main section (the starting point for Express) points to JavaScript files transpiled from TypeScript. Also, we configured it in a way that when we run npm run start, we first transpile TypeScript to JavaScript, and then start the Express server. So let's run the npm run start command and see if everything works (you should get a Hello World! response if you open localhost:3000).

Before starting to write the actual code, we still need to add all the necessary imports in our index.ts file:

import * as express from 'express';
import * as bodyParser from 'body-parser';

Then, we set up body-parser so we can simply parse JSON from POST calls.

This can easily be done by adding this after const app = express();:

app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(bodyParser.json());

If you have questions about the code or you experience trouble developing your dapp, you can ask our developers for help in our Gitter channel.

What comes next?

Now, we have everything set up and we can start setting up the 0xcert Framework and writing the API calls.

Start building

Framework tutorial #1: Run and prepare Geth node for back-end integration
Framework tutorial #3: Deploy asset ledger
Framework tutorial #4: Create new assets
Framework tutorial #5: Transfer assets

Newsletter