Build Your First Full Stack ‘Hello World’ dApp on Ethereum Blockchain

This is a learning by doing approach for the beginners who has a basic understanding of Ethereum Blockchain and it’s working fundamentals.

Following are the step by step procedures for Ethereum based Blockchain implementation of ‘Hello World’ dApp(Decentralized Application) with Solidity, Truffle and Web3 tech stack.

You need to have certain tools and packages installed on your local machine:-

  1. Install go-ethereum on your machine or Geth. You can refer for instructions.
  2. Install NodeJS on your local machine. You can refer this for further instructions.
  3. Install Truffle on your local machine by running $ npm install -g truffle

Create your own Ethereum private network by creating a private single geth node:-

  1. Create a project called Hello-dAppand go to the project. Hello-dAppis your root directory.

2. Create a genesis.json file by inserting following lines of code and put it in root directroy. The genesis block is the start of the blockchain, and the genesis.json is the file that defines it. It is like the “settings” for your blockchain.

3. Create a folder named datadir for chain data:

4. Initialize Blockchain network and create Genesis block

5. Start Blockchain network and expose useful RPC APIs

6. Now open new terminal tab with Hello-dApp as root directory and attach to geth.ipc

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 .

  1. Open new terminal tab with root directory and let’s use truffle initto initialise a project

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

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

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

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

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

3. Go to migrations folder and edit1_initial_migration.jsfile by adding following code snippet:

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

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

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

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

Or you can simply use:

8. Final directory structure looks like:-

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

Now view the application in your favourite browser using url:

Simultaneously, you can see the output on terminal too.

You get response with ‘Congratulations, you made it. Hello World!’

Well done!, we made our first dApp on Ethereum Blockchain. Congratulations!

The source code is available on this github repo:-

Attached is a quick video demonstrating how to run the application on your local system. The system used in here is macOS Mojave version 10.14.5 with tools versions used are as mentioned belows :-

Truffle v5.0.8 — a development framework for Ethereum

geth 1.8.12-stable — the go-ethereum command line interface

node v8.12.0

npm 6.4.1

Want to start learning and implementing Blockchain technology? Please go through my another post on the resources regarding Blockchain:-

Please comment down your errors, doubts and suggestions regarding the implementation. Also feel free to ask if you want complete source code explanation of this implementation. Give it a clap if this helps you.

If you are stuck with something feel free to tweet me here and connect me on LinkedIn , next I shall be coming with some dApps for real use cases.

Stay tuned, stay updated. Thanks!

Hope, It helps. Enjoy Blockchain!!

Blockchain Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store