Build your Ethereum App in React.js or Vue with “create-eth-app”

Michael Whittle
Oct 7 · 9 min read

Coinmonks” asked if I could write a tutorial on “create-eth-app” by “Paul Razvan Berg”. I have to admit I had never heard of it before. Normally for React.js Ethereum applications, I would either write my own with the Javascript “web3” library or use the “Truffle Suite Box for React.

I installed “create-eth-app” and I was pleasantly surprised how straight forward the process was. I did notice a few significant changes. For instance, the React.js application makes use of “React Hooks” which is more up to date than the “Truffle Suite Box for React. It also comes bundled with some useful examples on how to interface with “Ethereum Smart Contracts” whereas the sample React.js application from Truffle Suite just includes some basic Ethereum connectivity.

Try QuikNode: An alternate to Infura

I’m going to walk you through the installation now…

Requirements:

  • Node 8.16.0 or Node 10.16.0 or higher
$ node -v
v10.19.0
  • Node Package Manager (NPM) installed
$ npm -v
6.14.4
$ sudo apt-get upgrade npm -y
Reading package lists... Done
Building dependency tree
Reading state information... Done
npm is already the newest version (6.14.4+ds-1ubuntu2).
Calculating upgrade... Done
0 to upgrade, 0 to newly install, 0 to remove and 0 not to upgrade.
  • Yarn 0.25 or later
$ yarn --version
1.22.5
$ sudo apt-get install curl -y
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt update && sudo apt install yarn

Now this is a really great feature introduced in Yarn 0.25+

yarn create <starter-kit-package>

In our case, we’ll run…

$ yarn create eth-app mediumtutorial

If for any reason yarn complains saying it doesn’t support “create”, make sure you install it using the official documentation for your platform.

$ yarn create eth-app mediumtutorial
yarn create v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-eth-app@1.5.0" with binaries:
- create-eth-app
*** INSTALLATION PROCESS ***Success! Created mediumtutorial at /var/repos/mediumtutorial
Inside that directory, you can run several commands:
yarn react-app:start
Starts the development server.
yarn react-app:build
Builds the app for production.
yarn subgraph:codegen
Generates AssemblyScript types for smart contract ABIs and the subgraph schema.
yarn subgraph:deploy
Deploys the subgraph to the official Graph Node.
We suggest that you begin by typing:cd mediumtutorial
yarn react-app:start
Done in 131.13s.

create-eth-appsupports multiple frameworks: “react” and “vue

In order to specify a framework, you can do this…

$ yarn create eth-app mediumtutorial --framework react
$ yarn create eth-app mediumtutorial --framework vue

create-eth-app” also supports multiple established protocol templates.

  • React: aave, compound, default, kyber, maker, sablier-v1, synthetix, uniswap-v1, uniswap-v2
  • Vue: aave, compound, default, kyber, maker, sablier-v1, synthetix, uniswap-v1, uniswap-v2
$ yarn create eth-app mediumtutorial --template compound

Let’s start our React.js application…

$ cd mediumtutorial
$ yarn react-app:start
Compiled successfully!You can now view @project/react-app in the browser.Local: http://localhost:3000
On Your Network: http://192.168.1.2:3000
Note that the development build is not optimized.
To create a production build, use npm run build.

Now out the box, we have two options to connect to our Ethereum blockchain.

I’m a fan of MetaMask so will talk you through the installation if you don’t already have it installed. Open metamask.io and click on Download.

I’m using Chrome so will click on the “Install MetaMask for Chrome”.

Click “Add to Chrome” if that is the browser you are using.

The first choice you will be provided is here…

If you already have your own Ethereum wallet and seed phrase you can import it here. If you have been using something like MyEtherWallet in the past you would have been provided with a seed phase from your existing wallet.

For the purpose of this tutorial, I’m just going to keep it simple and “Create a Wallet” and click “I agree” on the next page.

Create a password for opening MetaMask. This has nothing to do with your Ethereum wallet.

Image for post
Image for post

This page may seem like an optional step but you need to do it now. Click on “CLICK HERE TO REVEAL SECRET WORDS”. It’s really important you make a copy of the seed phrase and keep it safe. It will be a series of words that you will need on the next page so make sure you have then noted down.

Image for post
Image for post

So what you have to do here is click on each word in the order of the seed phrase to move onto the next page.

Image for post
Image for post

We’re all done…

This is telling me that the new Ethereum address I created for this tutorial on the Main Ethereum Network is, “0xa5e4c94BC98c5732415A3A139f6fDE9372A2c7A”. I’m obviously not going to be using this tutorial address for anything after this but it is a real valid address on the Ethereum main network. You can also see that the starting valance is 0 ETH which is to be expected but I could transfer ETH to it from another wallet or exchange if I wanted to.

There are just a couple of other useful points to note…

Image for post
Image for post

By clicking on the “Main Ethereum Network” menu option you can see it provides several other networks to connect too including all the Ethereum test networks. Two really useful options I use is the last two which allow you to connect to private Ethereum networks. I’ve written an article on how to create your own Ethereum private network here.

Now we can go back to our “create-eth-app” site running on “http://localhost:3000” and refresh the page. You should see that MetaMask is now detected. You will want to select your account, click “Next”, then “Connect”.

If you now click on “Connect Wallet” in the top right. This will present you with the two options to connect. We want to use “MetaMask” so click on it.

You will now see that the “Connect Wallet” has been replaced with “Disconnect Wallet”. You can toggle between being connected and disconnected from this button.

Image for post
Image for post

The majority of what you will see in this tutorial is behind the scenes and can be viewed in the browser inspector. In Chrome it is F12.

I’m using Visual Studio Code so going to open the project to have a look around.

% cd mediumtutorial
mediumtutorial % code .

So what can we see here…

For a start, the project structure looks a little different to “normal”. At least quite different to “create-react-app”. The project actually has actually been constructed using “yarn workspaces.

There are 3 packages you could find under “./packages” depending on which template you are using.

  • Contracts

The Ethereum smart contract ABIs and addresses are stored in this dedicated package. The ABI is an interface allowing you to interact with the smart contract deployed on the Ethereum network.

  • React App

create-eth-app” is a fork of “create-react-app” which I am sure you are familiar with already.

  • Subgraph

Subgraph is a much more efficient way of retrieving data from an Ethereum protocol which is typically quite slow. It is a GraphQL server that indexes the events emitted on the blockchain. “create-eth-app” very kindly provides you with a basic subgraph that indexes the transfers of an ERC20 contract.

Let’s open the “./packages/react-app/App.js” and see what is in there…

The first thing you will notice is that this project uses “React Hooks”. So it seems like a much more recent update from “create-react-app” which still loads with functional and class components.

There is something in the render return which may not be obvious to spot at first glance. There is a button with useful example functionality which is hidden by default. You will probably want to remove the “hidden” keyword and reload.

{/* Remove the "hidden" prop and open the JavaScript console in the browser to see what this function does */}
<Button hidden onClick={() => readOnChainData()}>
Read On-Chain Balance
</Button>

After removing it you will now see another button called “Read On-Chain Balance”. You can click on this and inspect the output in the browser console.

Image for post
Image for post
{cDAIBalance: "1000000000"}

I’m a little surprised that there is a lot of functionality to interface with smart contracts but “web3” or “ethers” is not included in the project by default. I added it into my project.

react-app % yarn add ethers web3

It would have been great to have some additional “web3” or “ethers” examples included in “create-eth-app” for completeness.

Here are a few additional examples you can add you your “./packages/react-app/App.js”.

import { ethers } from 'ethers';
import Web3 from 'web3';
async function getBalanceUsingEthers(provider, address) {
provider.getBalance(address).then((balance) => {
let etherString = ethers.utils.formatEther(balance);
alert("Balance: " + etherString);
console.log("Balance: " + etherString);
});
}
async function getAccountsUsingWeb3() {
var web3 = window.web3;
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
web3.eth.getAccounts().then((account) => {
alert("Account: " + account);
console.log("Account: " + account);
});
}
}
async function getBalanceUsingWeb3(address) {
var web3 = window.web3;
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
web3.eth.getBalance(address).then((balance) => {
alert("Balance: " + web3.utils.fromWei(balance, 'ether'));
console.log("Balance: " + balance);
});
}
}
function App() {
return (
<Button onClick={() => getBalanceUsingEthers(provider, "0xa5e4c94BC98c5732415A3A139f6fDE9372A2c7Ac")}>
Get Balance Using Ethers
</Button>
<Button onClick={() => getAccountsUsingWeb3()}>
Get Accounts Using Web3
</Button>
<Button onClick={() => getBalanceUsingWeb3("0xa5e4c94BC98c5732415A3A139f6fDE9372A2c7Ac")}>
Get Balance Using Web3
</Button>
)
}

The “function App()” exists already in “App.js”. Just put the additional Button’s in the correct place. I also used my test Ethereum address in the example but you can put your own address you created in MetaMask.

The rest of “create-eth-app” looks pretty self explanatory. If you think there is an area I have not covered enough please let me know.

If you enjoyed reading this article and would like me to write on any other topics please let me know in the comments or email me directly.

I’m the Head of the Networks Practice at Net Reply. My team specialises in networks, security, and process automation including self-service dashboards. If you would like more information on this please contact me on m.whittle@reply.com. Alternatively, you can learn more about us on LinkedIn and Twitter.

Also, Read

Get Best Software Deals Directly In Your Inbox

Image for post
Image for post

Coinmonks

Coinmonks is a non-profit Crypto educational publication.

Sign up for Coinmonks

By Coinmonks

A newsletter that brings you week's best crypto and blockchain stories and trending news directly in your inbox, by CoinCodeCap.com Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Michael Whittle

Written by

CCIE R&S #24223 | Network Architect | Security Specialist | Software Developer | Blockchain Developer | Studying Machine Learning & AI

Coinmonks

Coinmonks

Coinmonks is a non-profit Crypto educational publication. Follow us on Twitter @coinmonks Our other project — https://coincodecap.com

Michael Whittle

Written by

CCIE R&S #24223 | Network Architect | Security Specialist | Software Developer | Blockchain Developer | Studying Machine Learning & AI

Coinmonks

Coinmonks

Coinmonks is a non-profit Crypto educational publication. Follow us on Twitter @coinmonks Our other project — https://coincodecap.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store