TL;DR
This is not an article explaining Blockchain or marketing Crypto.
This article focuses on facilitating any developer &/ blockchain enthusiasts build a prototype on blockchain; end-to-end. You’ll build a basic decentralized e-commerce platform by the end of this article.
In this article, you will write two contracts in Solidity (one for supplier & another for the customer), compile and migrate your contract to EVM, create a simple ReactJS frontend, connect your frontend to EVM via web3.js.
Alright, now that you are interested, let’s start coding! No fluff right!
Pre-requisites:
This article assumes you understand how to install NodeJS on development machines, how to download newer packages from npm and a basic understanding of ReactJS.
That you have the latest version of NodeJS installed on your development machine.
Install Truffle npm install -g truffle Truffle is a development and testing framework for Ethereum. With Truffle, you can compile, test and deploy smart contracts on Ethereum network.
Install TestRPC npm install -g ethereumjs-testrpc TestRPC is Node.js based Ethereum client for testing and make developing Ethereum applications much faster.
Install Create-React-App in some other folder. Probably in your root. npm install -g create-react-app
Create a folder for your app. May be call it MyDApp mkdir MyDApp & change to newly created folder cd MyDApp
npx create-react-app FrontEnd This will create the front-end. Production grade React built by issuing just one command! Can’t get any better! Right? For the sake of this demo, we will not build bundles; but, just run the app. npm start in the same folder; you should have ReactJS smooth and running on port 3000 (Unless it was directed to run on any other port)
Back-end:
With all the pre-requisites satisfied, lets concentrate on having a functional Blockchain back-end for our DApp.
Change to app’s root folder cd MyDApp
Create a dedicated structure for Back-end. mkdir BackEnd & cd BackEnd
Initialize Truffle by truffle init (In Windows 10, if this results in *Microsoft JScript runtime error, *change your command to truffle.cmd init) This will initialize the folder structure to create and deploy smart contracts.
Navigate to file named truffle.js and make sure it has this contents:
- Inside contracts folder, create a new file named Supplier.sol Now, lets code some Solidity to define our Suppliers back-end logic.
The above solidity contract is comprised of:
State variables: Think of these as global variables available across the contract.
Transactions: These are functions that add &/ update &/ delete data in the Blockchain.
Getters: These are functions too; but, only read data from the Blockchain.
It’s important to understand that Transaction functions cost ‘GAS’ when dealing with Blockchain. That means, operations like storing new data, updating &/ deleting existing data from Blockchain is not free! Explaining GAS is not in the scope of this article. This stackexchange answer does a pretty good job in explaining this unit.
However, reading data from blockchain can be free! Getter functions help us achieve that.
The above contract empowers our backend to support ‘Suppliers’ in an e-commerce platform.
We need code for Customers. Inside contracts folder, create a file named Customer.sol and lets code some solidity again. It’s fun isn’t it?
Now, lets write some logic for migrating these contracts to Blockchain network.
Inside ./MyDApp/BackEnd/migrations folder, create a new file named 2_deploy_contract.js which should contain the following code
Congratulations! You just completed coding a Blockchain back-end for your cool decentralized e-commerce.
Now, lets get it working.
Solidity is a compiled language. Lets compile our code using truffle compile (on Windows10, you might want to do truffle.cmd compile )
No compile time errors? Congratulations. Now, we have to migrate our contracts to Ethereum network. Open a new command prompt / terminal and navigate to ./MyDApp/BackEnd/ . It’s time to get Ethereum running locally on your machine. Do that using testrpc -l 9000000000 -p 8484
-l 9000000000 indicate the gas limit of the network. On production systems, this is real money! (Crypto of-course). On your machine, you have the control! (Feels rich right?)
-p 8484 indicate the port on which your RPC server must listen.
Leave that cmd/terminal running. Open another one and change to ./MyDApp/BackEnd . We gotta migrate our contracts into the network that we just started. We do that using truffle migrate (Again, on Windows10, you might want to use truffle.cmd migrate )
Whilst your contracts get migrated to the network, notice activity on another terminal where you have your rpc server running. Blockchain has recorded your contracts into its system! Phew, we are flying!!!
Contract Address’ & other config
For your front end to communicate with Blockchain back-end, it needs a few config information. Lets grab that info and save it for future reference.
Grab address of each contracts deployed to network.
Open another cmd/terminal and navigate to ./MyDApp/BackEnd Get truffle console using truffle console (on Win10, truffle.cmd console )
Get Supplier contract address using Supplier.address Store this address. We will need this shortly.
Get Customer contract address using Customer.address Store this address. We will need this shortly.
For web3 to marry Ethereum to React, it needs contract ABI. Again, explaining ABI is out of scope for this article; but, this stackexchange answer does a good job.
Get ABI for Supplier contract using JSON.stringify(Supplier.abi) . Terminal spits a huge string which is essentially JSON once you remove start and end quotes. Use JSONlint to help you format the JSON. Store this JSON. We will need this shortly.
Similarly, get ABI for Customer contract using JSON.stringify(Customer.abi) Again, remove the first and last quote, format and save this for future reference.
That’s it. You have coded, compiled, migrated and obtained config for Blockchain back-end of your cool decentralized e-commerce app!
There is only front end remaining. Let’s get to it!
Front-end:
As a part of pre-requisites, we installed create-react-app globally & created a react app for ourselves. Lets change to that directory. cd ./MyDApp/FrontEnd
We need to provide config information for React to connect to Blockchain backend. Let’s do that using the following code:
- Create a config file named EthereumSetup.js in /src directory. This is the time for you to grab hold of Supplier and Customer ABI’s obtained from previous steps.
- Create front-end components for Suppliers to add products to marketplace & process purchase-orders. Within /src folder, create a file named Suppliers.js
Notice how transaction functions (line 115, 127, 140) require gas to complete a transaction. If you are wondering how I’ve pre-determined gas limit to be 20000; The answer is, It’s random! In test networks, you will not have to worry about gas limits. It is a serious consideration when you go to public networks because, we are talking real money then. Higher the gas available for a transaction, it will be ranker higher in priority for the network to complete the transaction.
Now, similar to Suppliers.js we need front end logic and components for Customers to view items available in the marketplace and place order(s). Under /src directory, create a file named Customers.js
Also, note the event listeners. It’s important to trigger these event listeners after the component has been loaded to DOM. You can choose to watch events from a particular block or choose to go from 0 to latest . Using latter, you will catch all events recorded in the Blockchain from the very first block!
With Supplier and Customer components now ready to go, we are one step away from completing our front-end code. Let’s nail it.
Find App.js and make sure it reflects this code:
That’s it. You’ve completed front-end code for your decentralized app! Pretty amazing! You’ve come a long way from having nothing to a full stack DApp! Congratulations!!
To bring the site alive, open a cmd/terminal and change to ./MyDApp/FrontEnd and issue this command — npm start
Whoa!!! Can you see activity on the blockchain backend? That is all your event watchers from front-end subscribing to event emitters from the back-end. For those who know pub-sub; this is sort of similar! You now have a functional Blockchain powered decentralized e-commerce app!
If you are confused about what next, check line 22 to 27 in App.js for instructions.
Conclusion
This article helps you create a full stack DApp from scratch. You will understand how to write smart contracts in Solidity, start your Blockchain back-end and expose it to HTTP via RPC server. You will then use Web3 on the front-end to marry Ethereum back-end to React front-end. Hence ETHEReact!
I will be excited to learn about newer products you build from your newly acquired skills. I’ll be more than happy to support you in this exciting journey. You can find the codebase for ETHEReact here.
For further questions/ feedback / comments, you could reach me @ pruthvikumar.123@gmail.com
Happy coding,
Top comments (0)