ToDo List Ethereum Dapp (Step3) | Writing The Nodejs Backend

This tutorial is part of the series ToDo List Ethereum Dapp. It is the Step 1. Tutorials already published:

In this tutorial we are going to build the backend of our dapp. The role of the backend is just to serve a static html file, as well as assets (javascript and css). We are going to build this backend with nodejs and express.

Setup Express

Let’s install express, the web framework we will use:

npm install -S express
touch server.js

Let’s instantiate express and define useful variables:

const express = require('express');
const app = express();
const PORT = 3000;

Configure Static Assets

Let’s now configure express to serve static assets from the app folder:

app.use(express.static('app'));

If in our html file we have a link that points to /my-super-cool-style.css, express will fetch this file in app/my-super-cool-style.css.

Let’s also serve the compilation artifact of our smart contract. In a later tutorial our frontend will need it to communicate with the deployed smart contract:

app.use(express.static('build/contracts'));

Setup Routes

The first route we need to setup is for the static index.html file, which is the frontend of our dapp:

app.get('/', (req, res) => {
  res.sendFile(`${__dirname}/app/index.html`);
});

Then, we also need to setup a catch-all routes for all other urls:

app.get('*', (req, res) => {
  res.status(404);
  res.send('Ooops... this URL does not exist');
});

Start the app

app.listen(PORT, () => {
  console.log(`ETB Ethereum ToDo List App running on port ${PORT}...`);
});

Setup the html file

At the root of the project, create a folder app and a file index.html inside:

mkdir app touch app/index.html

Put this very minimal html inside index.html:

<html>
  <body>
    it works!
  </body>
</html>

Try out the app

In the package.json file, add this to the scripts section:

"start": "node server.js"

Now start the server:

npm start

Finally, in a new tab in your browser load http://localhost:3000. you should see it works on the screen.

Congrats! You reached the end of this chapter. In the next video we are going to setup the frontend and read account data (i.e we will do some ethereum/blockchain stuff, yeah!!).

Leave a Reply

Your email address will not be published. Required fields are marked *