Build Your First Full Stack ‘Hello World’ dApp on Ethereum Blockchain
By: Anand Kumar Sinha
Tags: Solidity, Ethereum, Web3, Truffle, Blockchain

Truffle Ethereum for Built-in support to Compile, Deploy and Link smart contracts. Truffle is just a CLI tool which helps us generate some robotic code snippets following the official Solidity Style Guide .

Open new terminal tab with root directory and let’s use truffle init to initialise a project

$ truffle init

Add truffle.js file with following code snippet in the root directory:-

module.exports = { networks: { development: { host: "127.0.0.1", port: 8545, network_id: "*", // Match any network id gas:2000000 } }, compilers: { solc: { version: "0.5.2" } } };

The structure of the project should now look like the following:

├── contracts

│ └── Migrations.sol

├── migrations

│ └── 1_initial_migration.js

├── test

├── truffle-config.js

└── truffle.js 3 directories, 4 files

Next, use truffle create contract HelloContract to create a new contract.

$ truffle create contract HelloContract

The structure of the project should now look like the following:

├── contracts

│ ├── HelloContract.sol

│ └── Migrations.sol

├── migrations

│ └── 1_initial_migration.js

├── test

├── truffle-config.js

└── truffle.js 3 directories, 5 files

2. Edit HelloContract.sol smart contract and paste the following code snippet, you’ll find it in contracts folder

pragma solidity >=0.4.22 <0.9.0; contract HelloContract { //constructor() public { //} string message = "Congratulations, you made it. Hello World!"; function GetMessage() public view returns(string memory) { return message; } }

3. Go to migrations folder and edit 1_initial_migration.js file by adding following code snippet:

const Migrations = artifacts.require("Migrations"); const HelloContract = artifacts.require("HelloContract.sol"); var Web3 = require('web3'); const web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545")); module.exports = function(deployer) { //web3.personal.unlockAccount(web3.eth.accounts[0], “passphrase"); //Note: Please enter the same passphrase you were asked to remember //while creating this new account. deployer.deploy(Migrations); deployer.deploy(HelloContract); };

4. Include package.json file in root directory by adding following code snippet:

{

"name": "yana",

"version": "1.0.0",

"description": "Yet Another NodeJs App",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "node index.js"

},

"author": "Anand Sinha",

"license": "ISC",

"dependencies": {

"cookie-parser": "^1.4.5",

"ejs": "^3.1.6",

"express": "^4.17.1",

"truffle-contract": "^4.0.31",

"web3": "^1.5.2"

}

}

5. Now create index.js file in root directory and add following code snippet for as to create a simple webpage to interact with the smart contract.

var express = require('express'); var cookieParser = require('cookie-parser'); var Web3 = require('web3'); var contract = require('truffle-contract'); var path = require('path'); var provider = new Web3.providers.HttpProvider("http://localhost:8545"); var app = new express(); var port = 3000; app.listen(port, function(err) { if (typeof(err) == "undefined") { console.log("Your application is running on port " + port +"

View the application in your favourite browser using url: https://127.0.0.1:3000"); } }); app.set('view engine', 'ejs'); var ContractJSON = require(path.join(__dirname, 'build/contracts/HelloContract.json')); var Contract = contract(ContractJSON); Contract.setProvider(provider); var Res; app.get('/', function(req, result) { Contract.deployed().then(function(instance) { instance.GetMessage.call().then(function(res, err) { getname = res.toString(); console.log("

Retrieving data from Blockchain:- " + res.toString()); result.render('display', { name: getname }); }); }); });

6. Create a folder named views in root directory and add display.ejs file inside it including following contents:-

<!DOCTYPE html> <html> <head> </head> <body> <h1><%=name%></h1> </body> </html>

7. Run the following commands on the terminal in project root directory to Compile and Migrate Smart Contracts to the Geth Node

$ truffle compile

$ truffle migrate

Or you can simply use:

$ truffle migrate --reset

8. Final directory structure looks like:-

├── build

├── contracts

├── datadir

├── genesis.json

├── index.js

├── migrations

├── node_modules

├── package-lock.json

├── package.json

├── test

├── truffle-config.js

├── truffle.js

└── views

Starting Node Application by opening new terminal in root directory:-