A cooking lesson with Brownie and React: Building Ethereum front-end dApps
Brownie 1.9.0 has just been released and with it we get full support for front-end integration while developing our smart contracts!
Getting started is easy. In fact, everything is packed ready-to-go in a tasty Brownie-Mix. So let’s get cooking!
Ingredients List:
Once you are ready, start by baking your Brownie Mix into a fresh directory:
$ brownie bake react-mix
SUCCESS: Brownie mix 'react-mix' has been initiated at react
The Brownie project resides in the root of the project. This is where we develop, test and deploy our contracts.
The React front-end lives in the client/ folder. Here we build our awesome dApp. To complete the setup, install the node packages for React.
$ cd client
$ yarn installNext, lets take a look at the brownie-config.yaml file.
A new feature right at the top: As of 1.9 we can change the folder where Brownie saves its deployment artifacts. This is crucial since React can’t access files outside of it’s src/ directory.
Next, we set a mnemonic phrase for the project’s development network. This let’s us use Metamask with the same accounts as Brownie.
By default Brownie will not create deployment artifacts while you are in a development environment. In our config file this already changed and we are ready to go!
Enter the Brownie console
$ brownie consoleThis will compile our contracts and launch a Ganache instance in the background. Neat!
From here we can use the prepared deployment script to deploy our contracts on the just launched Ganache instance.
>>> run("deploy")Running 'scripts.deploy.main'...
Transaction sent: 0x4e938c35ac09de2b92ddf47747a39c43e57b2583c5ca0518e05998b010c9a169
Gas price: 0.0 gwei Gas limit: 6721975
SolidityStorage.constructor confirmed - Block: 1 Gas used: 110641 (1.65%)
SolidityStorage deployed at: 0xF104A50668c3b1026E8f9B0d9D404faF8E42e642Transaction sent: 0xee112392522ed24ac6ab8cc8ba09bfe51c5d699d9d1b39294ba87e5d2a56212c
Gas price: 0.0 gwei Gas limit: 6721975
VyperStorage.constructor confirmed - Block: 2 Gas used: 134750 (2.00%)
VyperStorage deployed at: 0xB8485421abC325D172652123dBd71D58b8117070
Brownie supports Solidity and Vyper, even if they are used alongside in the same project!
Checking our client/src/artifacts/deployment/ directory, we can see three files have been created.
The map.json file keeps infos about all currently deployed contracts in one place, sorted by chain and contract name.
Launch the React Server
Before we dive deeper, lets launch the React sever. Make sure you are logged-in with Metamask, you are on the local network (Localhost: 8545) and you have loaded the project’s seed phrase:
hill law jazz limb penalty escape public dish stand bracket blue jarOpen a new terminal, move to the cilent/ directory and start the React server.
# In a new terminal
$ cd client
$ yarn start
React keeps loading the most recent deployments of your contracts by monitoring the map.json file. Back in the Brownie console, you can run the deploy script again and you will see the dApp immediately change to the newly deployed contracts.
Your deployment artifacts will not get replaced when you re-deploy your contracts. Instead, each deployment is saved in a separate file and the map.json gives you access to all of them, sorted by their deployment time. This means you can have different versions, with different bytecode, deployed at the same time and access all of them from within your front-end.
Loading the contracts in React is showcased in client/src/App.js and can be customized to your needs:
Another cool feature: You can snapshot the state of your local blockchain and revert to that state at any time! Brownie will clean up all the deployments and artifacts and fully restore the snapshotted environment.
>>> rpc.snapshot()
>>> run("deploy")
>>> VyperStorage[-1].set(999)
>>> rpc.revert()Persistence of the Deployments
When you close the console, the Ganache instance will be terminated and all your related deployments are cleaned up. If you need a more persistent local network, you can manually run Ganache in a separate terminal and Brownie will be able to attach this network (by just running brownie console). This way the artifacts remain even after closing the console.
If you need even more persistent deployments, its time to move to a public test net. These artifacts will be kept indefinitely by Brownie.
Next week we will take our react mix and deploy it on the Rinkeby test net!
Until then, check out the README for the Brownie-React-Mix and if you want to learn more about Brownie and keep up to date with all the new features in development, please follow our Twitter account and read our other Medium articles. You can also say hi on Telegram if you have any questions about using Brownie with React or anything else related to Ethereum, or Python development.
