Source Link: https://mirror.xyz/0x769699506f972A992fc8950C766F0C7256Df601f/iqlB8bddq3Rgv7fFc455OfqMNDf6M0hIEo1dWqlkohY
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
![[image-20211001211834038]](https://tva1.sinaimg.cn/large/008i3skNgy1gw7fgwaeoej30dl02djrf.jpg)
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!
https://ethereum.stackexchange.com/questions/65589/return-a-mapping-in-a-getall-function
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
