Create Web3 Dapp Quickstart

What's included inside create-web3-dapp?

In this guide, you'll learn how to kickstart your application boilerplates using create-web3-app. Before getting started, here's what will be included in your environment:

• Next.js
• Wagmi Hooks
• Ethers.js
• Rainbowkit
• Alchemy SDK

Supported chains

Create-web3-dapp supports all of the major EVM-based chains powered by the state-of-the-art Alchemy super node technology:

• Ethereum
• Polygon
• Arbitrum
• Optimism

Pre-requisites:

To use create-web3-dapp (CW3D), you'll need to have Node.js version > 16.16 installed on your computer.

You can check the version of nodejs by running the following command in your terminal or command line:

node -v
// v16.16.0

You can install NodeJs from the official website - make sure to select the recommended LTS version.

Once Node is installed, let’s get started building using Create Web3 DApp ⚡

Create web3 dapp project set up

1. Install the CW3D NPX package

In your terminal, navigate to the folder you want to create your project in and run:

npx create-web3-dapp@latest

🚧

If you've previously installed create-web3-dapp globally via npx create-web3-dapp:

The CLI builder will notify you if a new version has been released. In any case, we always suggest you to run using the latest available version by running npx create-web3-dapp@latest.

2. Insert a project name and template

You'll now get asked to insert a project name and a template to start from:

• Create empty full-stack dapp: With is option, you will be given an empty full-stack dapp with a wallet connection built-in using Rainbow Kit. Optionally, you can also choose to add a blockchain development environment (Hardhat or Foundry) in the project and add a pre-defined smart contract like ERC721, ERC721A, etc.
• Create pre-built template: You can select a pre-built template for a dapp with this option. Right now, we have the Block Explorer dapp as a template, and we are actively working on adding more templates soon!

Choose the "Create empty full-stack dapp" option. If you want to go with a prebuilt template, you can check out the docs for prebuilt templates.

3. Choose your chain

Once you have selected your starting template, you'll need to choose the chain you want to configure your project for. Note that you can always modify or add more chains in the future. Current choices include:

• Ethereum
• Polygon
• Arbitrum
• Optimism

4. Select testnet or mainnet

Select if you want to configure with mainnet or testnet. We generally recommend starting with a testnet if you're not ready to deploy to the live chain yet. Here are the corresponding test networks for each chain:

• Ethereum -> Goerli
• Polygon -> Mumbai
• Arbitrum -> Arb-Goerli
• Optimism -> Opt-Goerli

5. [Optional] Select your blockchain development environment

If you haven't yet created, built, or deployed your smart contracts, you'll be able to install a blockchain development environment directly through CW3D.

Blockchain development environments like Hardhat or Foundry provide a streamlined and efficient way for developers to build, test and deploy smart contracts.

Adding a Blockchain development environment will also allow you to get access to the Smart Contracts Backpack - a CLI implementation of the OpenZeppelin smart contract libraries.

You can skip this step if you are not using any blockchain development environment and jump to Step 6.

You will see these options for selecting the blockchain development environment:

1. Hardhat: Hardhat is a reliable, flexible, and extensible development environment for building EVM-based smart contracts.
2. Foundry(coming soon): Foundry is a user-friendly, collaborative, and secure blockchain development platform that accelerates the process of building and deploying smart contracts.

Select Hardhat as that's the only option available right now. Then it will ask you if you want an empty Hardhat project or if you want to create a smart contract right from the CLI. You can select NO if you want an empty Hardhat project but here we will select YES to showcase how you can create the smart contracts from CLI using the Smart Contract Backpack!

The Smart Contract Backpack allows developers to create production-ready and fully audited smart contracts, directly from the CLI in a matter of seconds - ready to be deployed on the blockchain.

The Smart Contract Backpack is built on top of the OpenZeppelin library and supports the almost same standards:

• ERC721
• ERC721A (coming soon)
• ERC20 (coming soon)
• ERC1155 (coming soon)

The contract creation process is pretty straightforward:

1. Select a standard
2. Select a name - this will be the name of your smart contract and token
3. Select a symbol - this will be the symbol of your smart contract and token
4. Select the libraries you want to include - see the OpenZeppelin documentation to learn more about the available libraries for every standard

Next, you will be shown some pre-made smart contracts (ERC721, ERC1155 etc.) and you can select one of them to include in your project, select ERC721 as that's the only option right now (we're working on adding more):

Next, you will be asked to give a name to your smart contract:

After that, you will need to define a symbol for your ERC721 tokens:

Next, you will be asked to select the libraries you want to include - see the OpenZeppelin documentation to learn more about the available libraries for every standard:

Select yes after you are done selecting the features:

6. Create an Alchemy Account or Enter your API key

Then, you will be asked if you already have an Alchemy account, selecting yes or no based on whether or not you have the Alchemy account.

If you already have an Alchemy account, you will be redirected to your Alchemy dashboard, from where you can copy and paste your API key into the terminal.

If not, you will be redirected to create a new Alchemy account and after creating the Alchemy account you can copy and paste your API key in the terminal.

We'll use an Alchemy API key to connect to the blockchain, read data, and deploy smart contracts.

That's it! Now you're ready to rock! 🚀 To launch CW3D, simply cd into your new project folder or your project's frontend folder (if you are using a blockchain development environment) and run:

npm run dev. This should open up the app on http://localhost:3000

What will CW3D already configure?

The above steps allow you to customize create-web3-dapp for your needs, but we also do a lot of work under the hood to ensure your project is ready to go once you run it! Here are the things that we automatically configure for you:

1. Environment variables: to safely store sensitive data (ex: API Keys) that are used in your application
2. Developer Environment Installation: when you select a developer environment, we'll install that package for you automatically
3. Other Dependencies: We'll make sure you get all the right dependencies so you can focus on building your application
4. Wallet interactions: We've automatically set up Rainbow kit for you to interact with wallets straight from the app

Congratulations! You've completed the setup process 🎉

Modify your DApp network with your .env.local file in the frontend directory

There are 3 steps we'll need to go through to get the most out of create-web3-dapp:

1. Modify the .env.local file
2. Run the smart contract marketplace and get access to tens of production-ready components
3. Explore the Alchemy Eco-system to get access to some of the most used Web3 developers' tools

Before going straight to modifying our .env.local file, make sure to familiarize yourself with the create-web3-dapp folder structure

Open the DApp folder created by the Create Web3 Dapp CLI builder, and open the .env.local file. If you have decided to install a Blockchain development environment, open the .env.local file inside the awsome-dapp/frontend folder.

Even if you have chosen the network during the setup process, is good to know that you can change the main network of your DApp, both Wallet and Alchemy SDK, through the .env.local file.

In the .env.local file, you’ll find these variables:

ALCHEMY_API_KEY=YOUR_ALCHEMY_API_KEY
ALCHEMY_NETWORK=YOUR-CHAIN
NEXT_PUBLIC_DEFAULT_CHAIN=YOUR-CHAIN-BUT-IN-RAINBOW-FORMAT

• The Alchemy API Key is used to power most of the React components you’ll import from the Create Web3 Dapp components marketplace, to connect using your wallet, plus you’ll also need an Alchemy API key to connect with the Supernode infrastructure.
• The Network is used to set up the main network on the Alchemy SDK.
• The Default Chain is used to set up the initial chain on the Rainbow wallet.

🚧

The .env.local file

Most of the components hosted on createweb3dapp.com heavily rely on third-party APIs. It is assumed, for the components to work, that you store your APIs in the .env.local file.

If you haven’t installed a Blockchain Development Environment, feel free to jump to the components documentation or continue reading to learn how to configure your blockchain development environment.

Hardhat - Modify the Backend .env file

Open the .env file in the backend folder of your DApp, you’ll find three variables:

ALCHEMY_API_KEY=YOUR-ALCHEMY-API-KEY
ETHERSCAN_API_KEY=
PRIVATE_KEY=

• The Alchemy API Key env variable is used in the hardhat.config.js file to connect Hardhat to the Alchemy Supernode and allow you to deploy and interact with your contracts on chain.

• The Etherscan API is used to verify your smart contracts on Etherscan through Hardhat.

• Your Private key is used to deploy the smart contracts on-chain and assigned as an owner of the contracts deployed through hardhat.

From here, you can customize the project to build your own web3 full-stack dapp 🚀

If you have any questions/feedback regarding create-web3-dapp, feel free to reach out on our telegram group for create-web3-dapp.

Continue Reading

• How to add components to create-web3-dapp