Get & Set Value 1.0 | Web3.0 dApp Dev 0x04

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

image-20211002001028548
image-20211002001028548

Then clone it.

image-20211002001126440
image-20211002001126440
# 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
[image-20211001211834038]
[image-20211001211834038]

1.4 Deploy the contracts!

yarn deploy
image-20211001220413508
image-20211001220413508

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.

image-20211001220814439
image-20211001220814439

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.

image-20211001232356720
image-20211001232356720

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!

image-20211001234607175
image-20211001234607175

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:

image-20211001234619304
image-20211001234619304

Then run yarn deploy:

image-20211001234758890
image-20211001234758890

Oh, now our contract is on Ropsten test network!

We can find it on Etherscan:

image-20211001234830483
image-20211001234830483

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
image-20211002000250805
image-20211002000250805

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
image-20211002000605549
image-20211002000605549

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.

image-20211002002301741
image-20211002002301741

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

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

image-20211002005210633
image-20211002005210633

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:

leeduckgo
leeduckgo
msfew
msfew
Subscribe to leeduckgo
Receive the latest updates directly to your inbox.
Verification
This entry has been permanently stored onchain and signed by its creator.