History articles:

Eth.build Quickstart | Web3.0 dApp Dev 0x01

Web3.0 dApp Developer Growth Path | Web3.0 dApp Dev 0x02

Scaffold-Eth Quickstart | Web3.0 dApp Dev 0x03

1 Run 1.0 version locally

Let's try to run version 1.0 locally.

The 1.0 version don't need us to do much. We just need to clone the repo and start it.

1.1 Download the code, switch branch and initialize the submodules

First fork it

https://github.com/leeduckgo/set-purpose

Then clone it.

# clone Repo
git clone [forked repo]
# example: git clone https://github.com/WeLightProject/set-purpose.git
cd set-purpose
# Checkout another branch
git checkout feat/v0x01
# Initialized submodules
git submodule update --init packages/hardhat/contracts

1.2 Install dependencies

yarn

1.3 Start local test network

yarn chain

1.4 Deploy the contracts!

yarn deploy

1.5 Start the application in another terminal

yarn start

1.6 Open in the browser!

Access the app:

http://localhost:3000

Now you see your application.

2 Debunk contract source code

pragma solidity >=0.8.0 <0.9.0; // Solidity version
//SPDX-License-Identifier: MIT

import "hardhat/console.sol";
// The reason why we import console.sol : https://hardhat.org/tutorial/debugging-with-hardhat-network.html, simply that we can do console.log in our contract.
//import "@openzeppelin/contracts/access/Ownable.sol"; //https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol

contract PurposeHandler { // Name of contract

  //event SetPurpose(address sender, string purpose);

  string public purpose = "Building Unstoppable Apps!!!"; // define and assign a variable purpose. This variable is directly stored on the blockchain. That is the unique feature of solidity: Assign is storing.

  constructor() {
    // what should we do on deploy?
  }

  function setPurpose(string memory newPurpose) public {
  		// A function that pass newPurpose as parameter
  		// You can learn more about memory/storage:
  		// https://learnblockchain.cn/2017/12/21/solidity_reftype_datalocation
      purpose = newPurpose; // Update purpose to be newPurpose
      console.log(msg.sender,"set purpose to",purpose);
      //emit SetPurpose(msg.sender, purpose);
  }
}

3 Deploy your app on Github-pages

Becuase our web3.0 app is a pure front end application, we don't need to purchase or rent a server. We can just deploy the app on GitHub.

3.1 Switch network to test network in React app

Aha! Here is the first part that we need to change our code. Locate the following code at packages/react-app/src/App.jsx:

const targetNetwork = NETWORKS.localhost; // <------- select your target frontend network (localhost, rinkeby, xdai, mainnet)

Switch localhost to the test network that we want to deploy, like ropsten.

const targetNetwork = NETWORKS.ropsten;

Then we refresh the page, and we can see that it pops an alert to connect the test network.

Use metamask to connect the test network. Before that, we need some ETH to call the contract:

Ropsten faucet: https://faucet.ropsten.be/

3.2 Switch network to Ropsten network in Hardhat

This determines which network we are connecting in Hardhat.

Go to packages/hardhat/hardhat.config.js:

const defaultNetwork = "localhost";

Change localhost to ropsten。

const defaultNetwork = "ropsten";

3.3 Redeploy the contract

Since we changed the network, we need to redeploy our contract

We need to generate a new address in hardhat:

yarn run generate

Tips No.1：

You can see all the commands in package.json!

Tips No.2:

git basic commands:

git add . # add all changes
git commit -m "[msg]" # commit all changes
git push

Well, now we have a new ETH address of 0x1c95a91e74872ead0a4c726712cfdfab3292f284. We will use this address to deploy contracts.

Let's get some test ETH for the address:

Then run yarn deploy:

Oh, now our contract is on Ropsten test network!

We can find it on Etherscan:

3.3 Generate static websites

First we need to have a new branch to host all the static websites:

git checkout -b gh-pages

The best practice is to put this branch in another folder, so that our changes to gh-pages won't affect other files:

git checkout feat/v0x01
git worktree add ../set_purpose_gh_pages gh-pages

Run the following commands, and static pages that can be hosted on Github-pages are generated:

yarn build

Websites are generated at packages/react-app/build, then we copy the folder's files to docs folder:

mkdir docs
cp -r packages/react-app/build/* ../set_purpose_gh_pages/docs

Delete the rest of the folders:

rm -rf packages package.json yarn.lock node_modules

Everything look great! Let's push this branch:

g add .
g commit -m "feat/init gh-pages"
git push --set-upstream origin gh-pages

3.4 Github-pages settings

We still need to set something in the Github repo pages. We go to Settings>Pages to set Branches and Folder.

Click the link in the green box. Now we see the first web3 Dapp we created!

https://leeduckgo.github.io/set-purpose

Tips No.3: Git Submodule

Sometimes our repo may rely on other repos. Then we need to use Git Submodule.

Other than that, we need to split the chunks of code to make the project structure better.

For example, we split the code of set-purpose and set-purpose-contracts in this tutorial.

Here is the cheatsheet for commands of git submodule:

# browse the help
git submodule -h
# add submodule
git submodule add https://github.com/leeduckgo/set-purpose-contracts.git
# clone all the submodules of repo
git clone --recurse-submodules https://github.com/leeduckgo/set-purpose.git
# only update selected submodule
# --init is the parameter required for the first update. The following is the path of submodule.
git submodule update --init packages/hardhat/contracts

Authors：