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.

Setting Up Our Project

I wish I could separate the front-end app and the chain-end app.
Keep simple, keep pure.

What are you best to know

• Metamask
• React
• Node
• Solidity

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.

Learning DApp architecture

I have read through this The Architecture of a Web 3.0 application and the knowledge I have so far.

I draw the simply DApp architecture

Look at the picture, there are two important questions:

1. How do browsers and websites interact with each other?
2. How do websites and blockchains interact with each other?

Simple Answers:

1. Browser’s wallet extension or Wallet App
2. JSON RPC

Then, we will explore these two questions carefully when building a minimal DApp.

Our Target

0. What is a minimal DApp?
1. Frameworks and technologies
2. Setting up the project
3. Setting up the local chain
4. Deploying smart contract to a local chain
5. Building front-end then using it to call smart contract
6. Deploying DApp to the world

If you build a website with NextJS as full stack web framework, perhaps you will encounter a need to upload a file.

But the NextJS’s official website doesn’t write how to do this.

So I investigated other developers’ code to make a working version.

Create NextJS Project

1

yarn create next-app

Install TinyMCE latest version

1

yarn add tinymce @tinymce/tinymce-react copy-webpack-plugin