Skip to content

Using Scaffold-ETH 2 to Deploy a DApp on Moonbeam

Introduction

Scaffold-ETH 2 is a collection of commonly used Ethereum development tools to quickly deploy a Solidity smart contract and launch a DApp with a React frontend.

Scaffold-ETH 2 consists of several sub-components, including Hardhat for creating, deploying, and testing smart contracts and Next.js for building a React frontend. These components can be used on Moonbeam networks with some slight modifications.

This guide will walk through the steps to deploy and run the default example contract and DApp that Scaffold-ETH 2 comes with on a Moonbeam network.

Checking Prerequisites

To get started, you will need the following:

  • An account with funds. You can get DEV tokens for testing on Moonbase Alpha once every 24 hours from the Moonbase Alpha Faucet
  • A Moonscan API key
  • To test out the examples in this guide on Moonbeam or Moonriver, you will need to have your own endpoint and API key, which you can get from one of the supported Endpoint Providers

Installing Scaffold-ETH 2

First, download Scaffold-ETH 2 from GitHub.

From the command line, enter:

git clone https://github.com/scaffold-eth/scaffold-eth-2.git

After the download completes, run:

yarn install

The Development Process with Scaffold-ETH 2

The process for developing a project with Scaffold-ETH 2 can be outlined as follows:

  1. Update the network configurations in Hardhat for Moonbeam
  2. Add your smart contracts to the packages/hardhat/contracts
  3. Edit your deployment scripts in the packages/hardhat/deploy
  4. Deploy your smart contracts to Moonbeam
  5. Verify your smart contracts with the Etherscan plugin and your Moonscan API key
  6. Configure your frontend to target Moonbeam in the packages/nextjs/scaffold.config.ts file
  7. Edit your frontend as needed in the packages/nextjs/pages directory

In this guide, you can use the default contract and frontend that you get out of the box when you clone the Scaffold-ETH 2 repository. All you'll have to do is modify these components for Moonbeam.

The Hardhat Component

In the following sections, you'll update the network configurations in the Hardhat configuration file to target the Moonbeam-based network you want to interact with, and deploy and verify the example contract to that network.

Configure Hardhat for Moonbeam

You can begin by making modifications to the Hardhat component under the packages/hardhat folder. You'll primarily be editing the hardhat.config.js file to configure it for Moonbeam. However, you'll also need to create a .env file to store a couple of variables that will be consumed by the hardhat.config.js file.

You can refer to the .env.example file for the variables that are already used in the hardhat.config.js file. For Moonbeam, you'll only need to create two variables: DEPLOYED_PRIVATE_KEY and ETHERSCAN_API_KEY.

Check out the Etherscan Plugins documentation to learn how to generate a Moonscan API key.

To get started, create a .env file:

touch packages/hardhat/.env

Edit your .env file to include the following variables:

DEPLOYER_PRIVATE_KEY=INSERT_PRIVATE_KEY
ETHERSCAN_API_KEY=INSERT_MOONSCAN_API_KEY

The private key you add to your .env file corresponds to the account that will deploy and interact with the smart contracts in your Hardhat project. Additionally, the Etherscan API key will correspond to your Moonscan API key and will be used to verify your deployed smart contracts. To learn how to generate a Moonscan API key, check out the Etherscan Plugins documentation.

With the environment variables taken care of, next you can modify the hardhat.config.js file for Moonbeam:

  1. Set the constant defaultNetwork to the network you are deploying the smart contract to

    defaultNetwork = 'moonbeam';
    
    defaultNetwork = 'moonriver';
    
    defaultNetwork = 'moonbaseAlpha';
    
    defaultNetwork = 'moonbeamDevNode';
    
  2. Add the network configurations for the Moonbeam network you want to interact with under the networks configuration object

    moonbeam: {
      url: "INSERT_RPC_API_ENDPOINT",
      accounts: [deployerPrivateKey],
    },
    
    moonriver: {
      url: "INSERT_RPC_API_ENDPOINT",
      accounts: [deployerPrivateKey],
    },
    
    moonbaseAlpha: {
      url: "https://rpc.api.moonbase.moonbeam.network",
      accounts: [deployerPrivateKey],
    },
    
    moonbeamDevNode: {
      url: "http://127.0.0.1:9944",
      accounts: [deployerPrivateKey],
    },
    

    To test out the examples in this guide on Moonbeam or Moonriver, you will need to have your own endpoint and API key, which you can get from one of the supported Endpoint Providers.

For more information on using Hardhat with Moonbeam, please check the dedicated Hardhat page for more details.

Deploy Your Contract to Moonbeam

After all the modifications to the configuration files are done, you can deploy your contract to the configured Moonbeam-based network.

First, you can compile your contract by running:

yarn compile

The terminal output from running the compile command.

Then, you can run the following command from the root directory of your project:

yarn deploy

The terminal output from running the deploy command.

Note

If you did not set the defaultNetwork config in the hardhat.config.js file, you can append --network INSERT_NETWORK to the command. For example, the following command would deploy a contract to Moonbeam.

yarn deploy --network moonbeam

Verify Your Deployed Contract

If you would also like to use Scaffold-ETH 2 to verify the deployed smart contract and have entered your Moonscan API key into the .env file, you can go ahead and verify your deployed contract.

If the smart contract you are verifying has constructor method parameters, you will also need to append the parameters used to the end of the command.

You can use the following command to verify the smart contract:

yarn verify --api-url https://api-moonbeam.moonscan.io
yarn verify --api-url https://api-moonriver.moonscan.io
yarn verify --api-url https://api-moonbase.moonscan.io

Note

If you did not set the defaultNetwork configuration in the hardhat.config.js file, you can append --network INSERT_NETWORK to the command. For example, the following command would verify a contract on Moonbeam.

yarn verify --network moonbeam --api-url https://api-moonbeam.moonscan.io

After a short wait, the console output will display the verification result and, if successful, the URL to the verified contract on Moonscan.

The terminal outut from running the verify command.

For more information about verifying smart contracts on Moonbeam using the Hardhat Etherscan plugin, please refer to the Etherscan Plugins page.

The Next.js Component

In the following sections, you'll modify the Next.js configuration so that it targets the Moonbeam-based network that your contract has been deployed to, and then you'll launch the dApp.

Configure the DApp for Moonbeam

To target the Moonbeam-based network that you deployed your smart contract to, you'll need to edit the configurations in the packages/nextjs/scaffold.config.ts file. More specifically, you'll need to modify the targetNetworks array in the scaffoldConfig object. You can use the list of chains that viem provides to specify the chain(s) you've deployed your contract to.

targetNetworks: [chains.moonbeam],
targetNetworks: [chains.moonriver],
targetNetworks: [chains.moonbaseAlpha],
targetNetworks: [chains.moonbeamDev],

That's all you have to do to configure Next.js! Next, you can launch the dApp.

Launch the DApp

After all the modifications to the configuration files are done, you can launch the example dApp. To do so, you can run:

yarn start

The terminal outut from running the start command.

This will launch the React-based DApp frontend at http://localhost:3000/ by default. You can then point your browser to http://localhost:3000/ and interact with the React frontend by connecting your wallet or checking out the contract debugger page.

The frontend of the DApp on the browser.

And that's it! Now that you have the basics down, feel free to create and deploy your own smart contracts and modify the frontend to fit your dApp's needs! For more information, you can check out the Scaffold-ETH 2 docs.

The information presented herein has been provided by third parties and is made available solely for general information purposes. Moonbeam does not endorse any project listed and described on the Moonbeam Doc Website (https://docs.moonbeam.network/). Moonbeam Foundation does not warrant the accuracy, completeness or usefulness of this information. Any reliance you place on such information is strictly at your own risk. Moonbeam Foundation disclaims all liability and responsibility arising from any reliance placed on this information by you or by anyone who may be informed of any of its contents. All statements and/or opinions expressed in these materials are solely the responsibility of the person or entity providing those materials and do not necessarily represent the opinion of Moonbeam Foundation. The information should not be construed as professional or financial advice of any kind. Advice from a suitably qualified professional should always be sought in relation to any particular matter or circumstance. The information herein may link to or integrate with other websites operated or content provided by third parties, and such other websites may link to this website. Moonbeam Foundation has no control over any such other websites or their content and will have no liability arising out of or related to such websites or their content. The existence of any such link does not constitute an endorsement of such websites, the content of the websites, or the operators of the websites. These links are being provided to you only as a convenience and you release and hold Moonbeam Foundation harmless from any and all liability arising from your use of this information or the information provided by any third-party website or service.
Last update: June 10, 2024
| Created: July 15, 2024