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

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.

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

yarn start

Access the app:

http://localhost:3000

Now you see your application.

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);
  }
}

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.

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/

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";

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!

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

We can find it on Etherscan:

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:

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

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

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：

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

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.

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

yarn start

Access the app:

http://localhost:3000

Now you see your application.

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);
  }
}

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.

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/

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";

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!

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

We can find it on Etherscan:

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:

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

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

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：