Create and Deploy a React Dapp to an Ethereum Test Network

This guide will show you how to quickly create and deploy a React decentralized application (dapp).

What You’ll need:


Truffle is a Node.js framework for Ethereum that allows you to build, test, and deploy smart contracts. The Truffle Suite provides developers with many useful tools for quickly building full-stack decentralized applications. For instance, Truffle boxes provide you with boilerplate templates that may contain other helpful modules. For the front-end, we will be using the react box.

In your terminal type,
npm install -g truffle


truffle unbox react

Once complete, the following directories make up your backend:


The client/: directory holds your frontend.

Along with Truffle, you’ll want to download Ganache. This allows you to deploy smart contracts to a locally hosted Ethereum blockchain. Provided are 10 accounts with 100 ether (on the test network), perfect for testing smart contracts.

Edit truffle-config:
Under networks add

development:{ host: “”, 
port: 8545, network_id: “*” // Match any network id 

This information can be found/configured in your Ganache app.

Now we need an Ethereum Web 3.0 provider. is my go-to. In this example, I have selected the Ropsten test network. To specify which network you want to connect to, update the name and URL accordingly.

provider: function() {
return new HDWalletProvider(mnemonic, // Project secret key

Finally, below that we’ll add the Solidity compiler:

solc: { optimizer: { 
enabled: true, 
runs: 200

Hello World

Create a new file in contracts/: called “HelloWorld.sol”

pragma solidity ^0.5.16;

contract HelloWorld {
    string public greet = "Hello World!";

Update 2_deploy_contracts.js to look like this:

var helloWorld = artifacts.require("./HelloWorld.sol");

module.exports = function(deployer) {

Build, Test, Deploy

Now in the terminal type: truffle develop to launch the development console and then run the tests with: test (Note: When in the truffle development server, prefixing commands with truffle is redundant).

In a separate tab, navigate to the client directory and type:npm run start to run the frontend.

To deploy all the contracts in the contracts:
directory, type: migrate –-reset
The reset flag will re-deploy, or replace, all contracts in case of changes.

After deployment verify that your output is similar to this:

truffle(develop)> migrate --reset

Compiling your contracts...
> Everything is up to date, there is nothing to compile.

Starting migrations...
> Network name:    'develop'
> Network id:      5777
> Block gas limit: 6721975 (0x6691b7)


   Replacing 'Migrations'
   > transaction hash:    0x242d41966744d15ac61f87a75fd3d45140443774713588e04da1da838d27cca7
   > Blocks: 0            Seconds: 0
   > contract address:    0x28Aa5Af408Eb1a418217d67Cd335CEa32f0545Dd
   > block number:        1
   > block timestamp:     1623088109
   > account:             0xeccF565c46c1186C86D901Ba4896e4796f3eC466
   > balance:             99.9967165
   > gas used:            164175 (0x2814f)
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.0032835 ETH

   > Saving migration to chain.
   > Saving artifacts
   > Total cost:           0.0032835 ETH


   Deploying 'HelloWorld'
   > transaction hash:    0x656ef9264e1ce7d19068c97f8f1fe97c1cb97de9c1a5bd9a58ac3e6bf09db908
   > Blocks: 0            Seconds: 0
   > contract address:    0x2aB9e3F35bDb961d775ADb232128574C7cC501Ad
   > block number:        3
   > block timestamp:     1623088109
   > account:             0xeccF565c46c1186C86D901Ba4896e4796f3eC466
   > balance:             99.9926241
   > gas used:            162279 (0x279e7)
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00324558 ETH

   > Saving migration to chain.
   > Saving artifacts
   > Total cost:          0.00324558 ETH

> Total deployments:   2
> Final cost:          0.00652908 ETH

Quickly Create a React Dapp

In this guide, you learned how to quickly build, test, and deploy smart contracts to an Ethereum test network via Ganache. Quickly creating a full-stack blockchain application has never been easier thanks to Truffle boxes. The Truffle Suite is quickly becoming a one-stop-shop for all your blockchain development needs.