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

By [leeduckgo](https://paragraph.com/@leeduckgo) · 2021-11-08

---

History articles:

> [Eth.build Quickstart | Web3.0 dApp Dev 0x01](https://mirror.xyz/0x769699506f972A992fc8950C766F0C7256Df601f/xcUOEKghOqaBJ3jDv7Spec__NjMChsey2y37yQkDoNM)
> 
> [Web3.0 dApp Developer Growth Path | Web3.0 dApp Dev 0x02](https://mirror.xyz/0x769699506f972A992fc8950C766F0C7256Df601f/CsT6Zya3ucWwSxz0kK8wTJfHMWua_nNZlnDbgT9Chrs)
> 
> [Scaffold-Eth Quickstart | Web3.0 dApp Dev 0x03](https://mirror.xyz/0x769699506f972A992fc8950C766F0C7256Df601f)

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](https://github.com/leeduckgo/set-purpose)

image-20211002001028548

Then clone it.

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

### 1.3 Start local test network

\[image-20211001211834038\]

### 1.4 Deploy the contracts!

image-20211001220413508

### 1.5 Start the application in another terminal

    yarn start
    

### 1.6 Open in the browser!

Access the app:

> [http://localhost:3000](http://localhost:3000)

Now you see your application.

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

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

> Ropsten faucet: [https://faucet.ropsten.be/](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

> 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

Then run `yarn deploy`:

image-20211001234758890

Oh, now our contract is on Ropsten test network!

[https://ethereum.stackexchange.com/questions/65589/return-a-mapping-in-a-getall-function](https://ethereum.stackexchange.com/questions/65589/return-a-mapping-in-a-getall-function)

We can find it on Etherscan:

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:

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

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

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

> [https://leeduckgo.github.io/set-purpose](https://leeduckgo.github.io/set-purpose)

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

msfew

---

*Originally published on [leeduckgo](https://paragraph.com/@leeduckgo/get-set-value-1-0-web3-0-dapp-dev-0x04)*