Step by Step Approach to create DAPP—using Ethereum, ReactJS & IPFS — Part 1
In this article, we are going to see the step by step approach to create Decentralized Application using Ethereum Public Blockchain(using Solidity, ReactJS & IPFS)
To setup our application, you need to have 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 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- follow this link
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 — Grapical 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 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 know more -> Click here
To install truffle you need npm, give following command from your terminal it will install truffle globally.
npm install -g truffle
Step 4: Create ReacJS Application
Here, we will use truffle to setup 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 & setup your environment, so stay cool.. Once it is done, then use your favourite 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, 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 cost fee!, here in Ethereum world we call it as 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.
To get more updates on next part of this series, tag this story!… See you in my next article with bunch of technical stuff!..