This tutorial is part of the series ToDo List Ethereum Dapp. It is the Step 1. Tutorials already published:
- Intro
- Step 1: Writing The ToDo Smart contracts- beginning
- Step 2: Writing The ToDo Smart contracts- end
- Step 3: Writing The Nodejs Backend (This tutorial)
- Step 4: Setup the frontend and read account data
- Step 5: Build a smart contract client with Truffle Contract
- Step 6: Refactor With Webpack, ES6 and truffle-solidity-loader
- Step 7: Read Contract data from Frontend
- Step 8: Create smart contract data from frontend
- Step 9: Toggle task done & keep frontend updated
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!!).
Nodejs
Leave a Reply