Building a Simple React Dapp on the Tezos Blockchain — Part 1

This is part 1 of a series of posts about how to connect a react webapp to the Tezos blockchain. For other posts see:

1. Part 1 — Bootstrapping
2. Part 2 — Connect to a wallet
3. Part 3 — Connect and interact with a contract

Note: this series is based on Claude Barde’s post and is using truffle base example for the Counter contract. If you just want to learn the basics, I suggest following Claude Barde’s post. I’m currently creating a similar app, with react and truffle.

Complete code for this series is here.

Bootstrap:

What?!

• yarn create react-app web bootstraps a react app with all the defaults.
• yarn add @taquito/beacon-wallet @taquito/taquito - install taquito dependencies
• yarn global add truffle@tezos installs truffle, (you can skip this step if it's already installed). Notes:

1. You need to check that you have the Tezos version of truffle, if you don’t, you’ll need to uninstall and install this version.
2. I just reinstalled my computer and I had a few problems. First, truffle installation includes compiling c++ code, so you’re expected to have it installed. Second, although it says node 12 is supported it failed on my machine so I used node v10.

Let’s also install the beacon chrome extension

Configure Contract Deployment.

As Claude Barde’s tutorial uses carthegent we will use the same for deploying our contracts. Open tezos-counter-app folder using your favorite editor.

Check truffle for more explanation about the following commands.

Using https://faucet.tzalpha.net/ generate a faucet account and save it into the contracts folder as faucet.json.

replace truffle-config.js content with the following:

run truffle migrate inside the contracts folder.

Important: Make sure to save truffle-config.js or it will fail.

This command deploys the contracts to the blockchain (carthagenet) and sets their initial storage (check the contracts and migrations folders to see some code). When it succeeds you can see the contract’s addresses in your terminal and the build folder (JSON file for each contract). Copy the counter contract account and go to BCD to see the contract. Whenever we do any operation on this contract, you can see it here.

You can actually use BCD app to interact with the contract already.

run truffle test to see the tests running and then check BCD to see the tests interactions with the contract.

Now, since we’re not developing a contract here, the next part is the main one, developing the app.

Let’s Start With Client-side Development

In your terminal go into web folder and run yarn start. This will start the react development server, so any change we do in the app code will reflect almost immediately in the browser. when yarn start finishes the initial build you'll be presented with a URL, probably localhost:3000. Open it in your browser and let's start.

Open App.js and replace its content with

You can see in the browser that the initial app was replaced with an empty file

Let’s add the main ingredients for the app (it won’t be beautiful, sorry)

replace <div className="App"></div> with

This post was relatively short, we just bootstrapped our app. In the next post, we will connect the app to a wallet and show its balance.

For more stuff about tezos, go to our blog

— — — — — — — — — — — — — — — — -

Who am I? (About the Author)

My name is Chaim Lev-Ari. I’m a web developer and in the last 2 years, I got into Tezos. First, as a baker when I co-founded BakeryIL, and these days I’m starting with smart contract development. These posts are describing my journey in the ecosystem.