This is part 1 of a series of posts about how to connect a react webapp to the tezos blockchain. For other posts see:
- Part 1 - Bootstrapping
- Part 2 - Connect to a wallet
- Part 3 - Connect and interact with a contract
Note: this series is based on @claudebarde's post and is using truffle base example for the Counter contract. If you just want to learn the basics, I suggest following @claudebarde's post. I'm creating almost the same app, with react and truffle.
Complete code for this series is on my repo
My name is Chaim Lev-Ari, I'm a web developer. In the last 2 years, I started getting into Tezos. First, as a baker when I started BakeryIL, and these days I'm starting with smart contract development. These posts are describing my journey into the ecosystem.
- create a folder for the project
https://gist.github.com/f6544bc947c456ac00275cd8e757eed1
- run the following:
https://gist.github.com/d242a477a825d41b4c7dee52130178ef
yarn create react-app webbootstraps a react app with all the defaults.yarn add @taquito/beacon-wallet @taquito/taquito- install taquito dependenciesyarn global add truffle@tezosinstalls truffle, you can skip this step if it's already installed. Notes:
- 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.
- 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.
truffle unbox tezos-exampleThis bootstraps the tezos-example of truffle. This includes simple contracts, migrations, and tests. We will use the Counter contract for this tutorial.
Let's also install the beacon chrome extension
As @claudebarde'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:
undefined
run truffle migrate inside the contracts folder. I forgot to save truffle-config.js and it failed, so be sure that you've saved the file.
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.
OK, since we're not developing a contract here (that's a part I'm still learning), the next part is the main one, developing the app.
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
https://gist.github.com/5f237344bb4097ce4f0aca86315da711
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
https://gist.github.com/04cb1fd5d1555fccd76be399baf55015
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