Skip to main content

Web3 Deployment

  1. Deploy Smart Contracts to Testnet or Mainnet.
  2. Verify the deployment worked as expected.
  3. Deploye the web app with strategy that suits requirements for decentralisation.

Prerequisites​

Signup for accounts you need

  • node service (Infura, Moralis, etc)
  • etherscan key
  • IPFS etc

Scaffold Eth Deployments​

Scaffold Eth Docs to a testnet.

First deploy the Smart Contract to testnet or mainnet. Then build and deploy the Web app to interact with compiled smart contract..

Backend - Smart Contract

  • Test on localhost
  • Hardhat update defaultNetwork and Key config
  • Generate deployer account
  • Fund that account
  • Deploy contract
  • Verify contract is deployed

Frontend - React App

  1. Build
  2. Deploy

Smart Contract Deployment​

First re-run tests with localhost as defaultNetwork in hardhat.config.js

yarn test

Configure Contract Settings​

Update defaultNetwork in hardhat.config.js

const defaultNetwork = 'rinkeby';

Create a deployer account

yarn generate

Get the account address

yarn account

The deployer account will printed in the console.

📬 Deployer Account is 0x4b36d8e1af5540e90fa75db1a7879ed25dd672ff
 -- hardhat --  -- -- 📡
   balance: 0.0
   nonce: 0
 -- localhost --  -- -- 📡

Fund the Deployer Account Eth

Use Metamask to send 0.001 Eth to the deployer account using the correct network.

Load up on Test ETH with these faucets

Confirm that the funds have been sent.

tip

Can use punk wallet if you load it up with "Deploy" Eth

Check the transaction

yarn account

Deploy​

As per your setting in the hardhat.config or you can append a switch for desired network.

Update Node Service key in hardhat.config.js

Update with ID of your preferred node service, it won't work.

caution

Make sure there is a gas amount otherwise it a good chance the deploy with fail.

    rinkeby: {
      url: "https://rinkeby.infura.io/v3/{your-infura-id}", // INFURA
      //    url: "https://speedy-nodes-nyc.moralis.io/XXXXXXXXXXXXXXXXXXXXXXX/eth/rinkeby", // MORALIS ID
      gas: 6000000,
      accounts: {
        mnemonic: mnemonic(),
      },
    },
yarn deploy
tip

You can set the defaultNetwork in hardhat.config.js to Rinkeby OR you can yarn deploy --network rinkeby

deploying "Staker" (tx: 0xfe0c2058816b426050ae07f3d7f3bc51cfdb23fbc08d939994920911aebe596a)...: deployed at 0x5577abFb0473Cc69bffeFEC2F2D1863210347138 with 581367 gas

You can check amount of Eth used as gas.

https://eth-converter.com/

Copy the deployed at address and check results on etherscan.

https://rinkeby.etherscan.io/address/{deployed-address}

Verify​

Update the api-key in packages/hardhat/package.json

 "verify": "hardhat etherscan-verify --api-key {etherscan-api-key}",
yarn verify --network rinkeby

Should see the contract is verified

verifying Staker (0x5577abFb0473Cc69bffeFEC2F2D1863210347138) ...
waiting for result...
 => contract Staker is now verified

React App Deployment​

  • Configure App.jsx: set the network to connect to
  • Build: create an optimised dist for deployment
  • Deploy: to meet decentralisation requirements

Configure Deploy Build​

Select your target frontend network

Edit App.jsx in packages/react-app/src to select a network from:

  • localhost (local dev only)
  • rinkeby
  • kovan
  • xdai
  • mainnet
  • TODO: get full list
const targetNetwork = NETWORKS.rinkeby;

Build the React App Dist​

yarn build

Publish the Web App​

  • Surge
  • IPFS
  • Netlify
  • Vercel
  • NX Cloud
  • etc

Surge = Easy Deployment​

Update package.json to the following if using Windows

"surge": "surge ./build"
yarn surge
tip

If you get permission to publish error, just repeat, and be quicker to accept the proposed domain name. Otherwise someone else will claim it.

Should be able to navigate to your app and play around. For example:

https://impolite-dress.surge.sh/

Issues​

Verify skipping?​

Verify seems to be skipping if it has already been run?

yarn verify --network rinkeby