← Back to Blog Home

Create and Deploy a React Dapp to an Ethereum Test Network

Blockchain
by: Doug Shipp
Ganache logo

Article summary

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

What You’ll need:

Prerequisites:

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

Then,

truffle unbox react

Once complete, the following directories make up your backend:
contracts/:
migrations/:
test/:
truffle-config.js

Configuration:

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: “127.0.0.1”, 
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. Infura.io 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.


ropsten:{
provider: function() {
return new HDWalletProvider(mnemonic, // Project secret key
“https://ropsten.infura.io/v3/YOUR_INFURA_PROJECT_ID”)
}},

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


compilers:{ 
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) {
  deployer.deploy(helloWorld);
};

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)


1_initial_migration.js
======================

   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


2_deploy_contracts.js
=====================

   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


Summary
=======
> 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.

Related Posts