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

The goal of this Wanchain tutorial series is to show how the 0xcert Framework can be used with the Wanchain blockchain for building a dapp, as well as creating and managing non-fungible tokens.

⚠️ Prefer building on Ethereum? This tutorial should help.

Before we begin

This episode follows Tutorial #1 and assumes you have the Wanchain test node up and running.

In this tutorial series, you will learn:

1. How to set up a Wanchain test node (gwan)
2. How to create a Wanchain wallet and obtain test WAN tokens
3. How to set up Express server with TypeScript
4. How to connect Wanchain with the 0xcert Framework
5. How to use the 0xcert Framework for back-end
6. How to set up a simple front-end for testing

At the end of this tutorial, you will have a working Express server up and running.

To achieve this, we are using the following technologies:

• TypeScript
• Node.js
• Express.js

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

All of the code used for examples can be found on GitHub with additional functions and explanations.

1. Set up project and dependencies

We assume you have installed node.js. First, let’s create our project directory and initialize npm.

$ mkdir wanchain-example
$ cd wanchain-example
$ npm init

Now install all the required dependencies. First, install Express node that will run our API.

npm install express

The second dependency to be installed is TypeScript (we only need it as dev dependency since it’s no longer needed once it transpiles to JavaScript.):

npm install --save-dev typescript

Thirdly, we update our project so that TypeScript can handle type declarations for Express and node:

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

Lastly, we install body-parser, which will help parse JSON data in Express.

npm install body-parser

With this, our project is set up from the standpoint of our API. Up to this point, this has been just a standard Express TypeScript set-up. What makes the magic happen is the 0xcert Framework.

For this tutorial, we will need two of the Framework’s packages. The first is HTTP-Provider which enables communication with the Wanchain node. The second is Asset-Ledger that channels all the operations we want to perform (deploy, create, transfer, etc.). Let’s add both:

npm install @0xcert/wanchain-http-provider
npm install @0xcert/wanchain-asset-ledger

Now we have all the necessary dependencies installed, and we can continue towards creating the API.

2. Run Express with TypeScript

Since we are running Express server with TypeScript, it requires a somewhat 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}!`);
});

Now, let’s create a folder called src containing a file index.ts and paste the above example inside it.

Before running it, we still need to configure both TypeScript and our project. For that, we first create a file called tsconfig.json in our root folder and add the following 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. With it, we specified the output folder for JavaScript files to be dist. Now, we need to update package.json so it knows how to compile TypeScript to JavaScript and how to start the Express server. For that, 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"
}

We have set that the main file is a generated JavaScript file and that when we call npm run start, we first transpile TypeScript to JavaScript, and then start the Express server. Now we can run the npm run start command and see if everything works.

Before we start writing the actual code, let’s add all the imports in our index.ts file:

import * as express from 'express';
import * as bodyParser from 'body-parser';
import { HttpProvider } from '@0xcert/wanchain-http-provider';
import { AssetLedger } from '@0xcert/wanchain-asset-ledger';

Lastly, we set up the body-parser, so we can parse JSON from POST calls.

This can easily be done by adding the following section 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 with the 0xcert Framework on the Wanchain network, you can chat with our developers in the 0xcert Gitter channel, they will be happy to help.

What comes next?

At this point, everything needed for this step has been set up, and we can start creating the API.

⬇️Check other tutorial episodes, too⬇️

Framework tutorial for Wanchain #1: Run and prepare Wanchain test node for back-end integration
Framework tutorial for Wanchain #3: Deploy asset ledger
Framework tutorial for Wanchain #4: Create new assets
Framework tutorial for Wanchain #5: Transfer assets
Framework tutorial for Wanchain #6: Atomic operations in asset exchange on Wanchain

Originally published at https://0xcert.org.