In this article, we are going to see the step-by-step approach to creating a Decentralized Application using Ethereum Public Blockchain(using Solidity, ReactJS & IPFS)

To set up our application, you need to have the following system requirements. I will demonstrate this in Ubuntu 16.04 with enough storage space.

Steps to create your first DAPP

Step 1: We need to install MetaMask & enable the extensions in Chrome

Step 2 : Need to install “Ganache”

Step 3 : Need to install “Truffle Framework” using NPM

Step 4 : Create reactJS application

Step 5 : Create our First SmartContract using Solidity Language

Step 6 : Deploy our contract using Truffle in Ganache Network

Step 7 : Integrate the SmartContract Logic into the ReactJS program, so that you can play with front-end GUI

Step 8 : Initialize IPFS Daemon, & integrate that logic in ReactJS

Step 9: Run ReactJS Application

Step 10: Ensure MetaMask & Ganache are in Sync

Step 11 : Trigger “Write” Transaction via reactJS Application & pay Gas Fee to submit the transaction via MetaMask

Finally, review the results & make sure all are wired up successfully.

Are you guys, ready for the journey?.. Let’s begin…

Step 1: Let’s install MetaMask & enable the extensions. Go to Google, find metamask extension, click to install & enable the extensions. Once you are done, you should be able to see “Fox” symbol in your browser

Make sure that, yo have strong password setup & store it somewhere, without which you cannot restore your old accounts. So keep it strong & store it safe. Through this metamask, you can interact with MainNet(For Production) & few test nets

Note: For the first time, you will not be able to see this account(http://127.0.0.1:7545 — this is the account from Ganache localhost network). So if you dont see that, it is safe to ignore at this moment. We will see to that later. Otherwise, you are GOOD TO proceed with Step 2!

Step 2: Need to install Ganache

To install Ganache, Truffle you must need npm(Node Package Manager). So it is assumed that you are holding it ready?, else follow this tutorial to have npm installed first.

Ok, now give this command from your terminal to install Ganache, this is command line mode. If you are looking for Graphical mode, then choose other options — The graphical version

npm install -g ganache-cli

Graphical version — choose appropriate OS version, for Ubuntu, you will see this image downloaded, ganache-1.2.1-x86_64.AppImage once it is downloaded, double click to launch the Graphical mode.

We will use graphical mode in this article…

Note : it has so many options, such as “Current Block”, “Gas Price”, “Gas Limit”, “Network ID”, “RPC Server”, Mining Status.

Current Block: it indicates how many blocks are getting mined. During fresh execution(Whenever you open the Ganache), current block will be 0. Once you deploy your smart contract, this value gets changed accordingly.

Gas Price / Gas Limit: this is a simulated value & dummy. So it allows us to perform our development work using this gas value. Basically, GAS is very important factor in order to submit our transaction in blockchain. based on this Gas value only, you will be able to submit your transaction and it will be mined.

Network ID : 5777 (this can be changed in “Setting”(Gear Icon)) through this ID only, we will connect our reactJS application with Ganache.

RPC Server : http://127.0.0.1:7545

it will have 10 accounts with 100 ETH(Ether — dummy value :o)) this value is key to connect to our MetaMask. Only with this value, you will be able to connect with Ganache(10 accounts).

Mnemonic : this is unique, when you uninstall Ganache & re-install,then you will see different Mnemonic value.. this value is important to connect with MetaMask. Metamask is a bridge, that will connect our account from Ganache to Blockchain, through this you will submit your transaction (spend gas fee/eth)

Blocks: it contains list of blocks that are mined

Transaction: List of transactions that are submitted

Ok, these are key factors to remember in Ganache!, let’s dive into Step 3!!

Step 3: Install Truffle Network

Truffle is a development environment, testing framework, and asset pipeline for Ethereum, aiming to make life as an Ethereum developer easier. With Truffle, you get: Built-in smart contract compilation, linking, deployment, and binary management.

To install the truffle you need npm, give the following command from your terminal it will install the truffle globally.

npm install -g truffle

Step 4: Create ReacJS Application

Here, we will use truffle to set up reactjs Application. Reason behind this action is , truffle framework provides boilerplate which bootstraps your development environment much easier than traditional way. Let’s do that now..

Go to terminal & execute this command

what’s happening here?

• first we are creating new folder called mydapp
• changing our directory into mydapp
• unboxing the react application using truffle unbox command

it will take 2 to 3 minutes to unbox & set up your environment, so stay cool.. Once it is done, then use your favorite code editor. I will use Visual Studio code to perform the updates/configuration.

Step 5: Create & Deploy our first SmartContract using Solidity

if you unbox the react using truffle, then you will be able to see following folder structure in your code editor.

Contracts : it holds your smart contract program. Since we are writing using Solidity language, all file extensions inside this folder must be filename.sol. Along with our contracts, we will also have Migrations.sol, this holds the program for initializing your contract deployment.

Migrations : it holds actual migration js files which deploys the artifacts(smart contract). Note that, each file here is ordered by number(prefixed with 1, 2, & so on).

Node_modules : it holds all dependency files for your project

Public : it holds index.html (starting point of your application)

Scripts: required js files for building, and testing your contracts

Src : it holds key js files, which you mostly spend your time in setting up your application

Test : you will setup test file for your smart contract. please ensure that, you have enough test case captured here. We will use Mocha in upcoming steps.

truffle.js / truffle-config.js : if you are in ubuntu, it will use truffle.js, in windows it will use truffle-config.js

package.json : it holds all key information with respect to your project. This is key file, in which you will add your dependency & run npm install to download the same.

Ok, now let’s deploy our default smart contract that is already available

Step a) Launch Ganache & make sure it is running fine.

Step b) Go to truffle.js in your project folder & map the network to Ganache & network id to 7545 like below

Step c) open your terminal(pointing to your project directory) & initiate this command (truffle migrate –network ganache)

It will deploy your smart contract in local blockchain, to ensure the contracts are successfully deployed. Go to Ganache & check “Current Block”

If you closely observe Ganache(Blocks) & transactions, you will see set of blocks are mined with respect to our deployment. Here BLOCK 0 is Geneis block(primary), followed by other blocks that are numbered.

In your project folder, under contracts you would be able to see “Migrations.sol”, which does contains 4 methods, of which 3 functions are write transactions. Pls note that, in blockchain writing something into blockchain costs a fee!, here in Ethereum world we call it a GAS price.

Ok, we have done enough today, I believe above 5 steps are good enough to get you some insights on how different tools are interconnected. We will see more in my next article, in which we will develop a real-world application.