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

Julien Klepatch

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!!).

0 Comments

Leave a Reply

More great articles

Introduction To Truffle | Episode 5

https://youtu.be/M-w6dDDhu6w Developing smart contracts and distributed applications is hard. There are a lot of different libraries to use, you often…

Read Story

Split payment – Part II

Previously, we have implemented the main functionality of our split payment smart contract in Solidity. In this video tutorial, we…

Read Story

Simple smart contract

Starting with Solidity smart contract is a bit overwhelming... the tools, the Ethereum Blockchain, the Solidity language... that's a lot…

Read Story

Never miss a minute

Get great content to your inbox every week. No spam.
[contact-form-7 id="6" title="Footer CTA Subscribe Form"]
Arrow-up