If you follow previous post series, it means you have a react project with truffle framework. Also, you can find all versions and separate tutorial links on GitHub: https://github.com/erbileren/react-app-scratch
In this post, I will try to explain how you can run a blockchain based react project using MetaMask. But first, I want to give a short brief about running distributed applications:
To run any distributed application in Ethereum, you need to a client either local or public. For the local side, the most used one is Geth which is written in Go programming language. Basically, Geth creates a local working space for Ethereum by copying the network state. If you want to use public node, then you need to download Mist (or Ethereum-Wallet). You can also use Mist as an Ethereum wallet. There are some advantages and disadvantages of using public nodes for development, this will be another topic to discuss.
Let’s compile our app… First, if you have not compiled smart contracts before, go to the project root path, open a console window in there, and compile all smart contracts using truffle:
This command creates a build folder and which has built contracts in it.
Next, we need an Ethereum Blockchain to migrate our application. To do this, I prefer to use Ganache (you can download from here). It provides you 10 accounts by default.
One of the most important points is checking the RPC server information. It should be the same as in the truffle configuration file.
If you are using a different port in the truffle configuration file, then you need to change server configurations of Ganache.
Now, we can migrate smart contracts:
If the migration process finishes without any error, you should see the difference on the first account.
Then, open MetaMask (install from here) on your browser (Chrome or Firefox) click logout if you are logged in before.
Check the network as RPC with the parameters of the project.
You need to create a custom RPC if there is not a local network that meets your project’s requirements.
Instead of continuing with your previous MetaMask connection, you need to click on “Restore from seed phrase” and paste your Ganache’s mnemonic on there.
When you click on “OK”, you need to be redirected to your account page. Check the account’s balance, it should be the same as in Ganache.
Now, we have a MetaMask connected with Ethereum network. It is time to run the code. Return to the console and write:
npm run dev
Then go to localhost:8080 from your browser. Can you see this page?
Let’s work with the input area. Type any value then click Update button.
You should see MetaMask ask for the confirmation for the transaction. It is for the payment of the gas price.
When you click on SUBMIT , the value that you enter will store on the chain. If you want to test it, click on Get value button and see the magic!
As you know read operation does not have gas consumption that is why MetaMask does not ask for transaction confirmation while getting the value.