Why

Recently, I studied a lot of knowledge about the Ethereum ecosystem.
I can’t wait to create something by myself.
But I searched for a long time without finding a basic tutorial for me to explain how the front-end and chain-end interact.
Some tutorials are old. Other tutorials don’t match my tech stack.
I know scaffold-eth can help most fresh developers begin Ethereum development. However, scaffold-eth has too much magic for me. It hides some basic things. And I want to know the full details.
So I reckon I could write some articles from web2 developer to web3 beginner DApp developer in 2022. It’s a cool thing.

Deploying it to the World

So, we have it working great locally, how do we get it out to the world?

In the beginning, we quickly build our home page’s layout on the front-end project.

We use below code to replace front_end/pages/index.tsx file

Deploying the smart contract to a local chain

We remember the Foundry includes forge, cast, and anvil.
We will use forge to deploy our smart contracts. Then we will try to call our smart contract on cast

Setting up the local chain for development

Usually, We have three choose to run a chain on localhost.

1. HardHat - HardHat Network
2. Truffle - ganahce
3. Foundry - anvil

Generally, we should have chosen anvil. It’s a part of Foundry.
Unfortunately, there were a lot of transitions pending when I used it. From my point of view anvil just is the 0.1.0 version. It will be need more time to develop.
And I want to keep pure in chain end’s project(Not more javascript or npm install).
Finally, we used the ganahce to run chain on localhost.

The ganahce is very easy to install and setting up. It’s a GUI application.