Introduction
Choosing a Web3 stack can get complicated and intimidating, given that it is a complex ecosystem and there are multiple options to choose from. This article attempts to compile a development stack to help you get started on your next dApp.
The Web3 stack/setup (the libraries and development environment) both Local and testnet env.
Steps involved:
Frontend Framework for UI - React / Next.js
Wallet - Metamask
Libraries to interact with the blockchain - etherjs / web3.js along with Truffle or hardhat
Hosting - Infura, Alchemy
File hosting - IPFS, Filecoin
For writing and testing Solidity - Remix IDE
Local development - Ganache, Hardhat, Truffle
Testing - Truffle/Hardhat
Deployment - Alchemy
Authentication - Moralis
Ready to use smart contracts - Openzeppelin
Let's start with the basic requirements and get up and running in no time.
First, let's get set up with a local development environment.
Step 1: First things first, let's install the required dependencies
Node.js
Ganache
These are the libraries we will be using to interact with the blockchain in our local development environment.
Step 2: Choose and Initialize a framework
Truffle and hardhat are the popular frameworks to choose from. On one hand, Truffle has been the go-to framework for most developers but on the other, hardhat is catching on and becoming popular because hardhat is more configurable as it has plugins to help with the development process.
Step 3: Initialize truffle or hardhat
Run the following command in your terminal for truffle:
truffle init
Project structure for truffle
<project-name>
└─ contracts/
│ └─ Migration.sol
└─ migrations/
│ └─ 1_initial_migration.js
└─ test/
└─ truffle-config.js
or in the case of hardhat, run the following command:
npx hardhat init
that will create a structure like this:
<project-name>
└─ contracts/
│ └─ Lock.sol
└─ scripts/
│ └─ deploy.js
└─ test/
└─ Lock.js
└─ package.json
└─ hardhat.config.js
This will scaffold a bare minimum structure for you. In both cases, you will have a config file, a contracts directory, and a test directory.
Step 4: We need a frontend framework for our UI
Let's use React.js for this. Alternatively, you can use Next.js.
Either create a new directory for our frontend project,
mkdir frontend
cd frontend
or you can directly initialize a new project in the current directory.
Create a new project by running
npx create-react-app .
or for Next.js
npx create-next-app .
Step 5: We need a wallet to interact with the blockchain
A popular choice is Metamask. Install Metamask as a browser extension.
Now that we have our frontend framework set up, let's get started with the local setup for blockchain.
Step 6: Setup Ganache
Let’s fire up ganache UI and create a new ethereum workspace and click on add project and locate and add the truffle-config.js file. In case of hardhat, we can either use ganance or we can run a local testnet by running
hardhat node
Step 7: Install the required dependencies
npm install web3
Openzeppelin provides secure smart Contracts in Solidity which can be imported and used in solidity, hence -
npm install @openzeppelin/contracts
Step 9: Installing ipfs-http-client for file hosting
npm install ipfs-http-client
While these were the dependencies we needed for our local development environment, to develop and test our smart contracts, we can use Remix IDE which is a web-based IDE for developing smart contracts.
Now, For hosting the app on a testnet or mainnet, we can use Alchemy. Using Alchemy we can deploy our smart contracts to the blockchain either on the mainnet or testnet and deploy on the chains like Ethereum, Polygon, Solana, Arbitrum, and Optimism chain.
This was the bare minimum required to get up and running with a web3 project.
Going a step further
There are few libraries and SDKs that add an extra layer of abstraction for the development process, for example, Moralis.
Moralis SDK provides
We can install and use moralis package in our project by running the following command:
npm install moralis
npm install react-moralis
Setting up moralis is quite simple. First, we need to signup for a Moralis account on moralis.io. Then we create a new dApp on moralis by choosing testnet and a network(for example, Eth Ropsten).
Now we need two things from the moralis dashboard.
SERVER_URL
APP_ID
Copy these two and store them in a .env file.
Next, we import MoralisProvider from react-moralis and pass the server url and app id to it.
import "../styles/globals.css";
import { MoralisProvider } from "react-moralis";
function MyApp({ Component, pageProps }) {
const SERVER_URL = process.env.SERVER_URL
const APP_ID = process.env.APP_ID
return (
<MoralisProvider
serverUrl={SERVER_URL}
appId={APP_ID}
>
<Component {...pageProps} />
</MoralisProvider>
);
}
export default MyApp;
We can now use Moralis in our project. Moralis provides useful hooks like useMoralis ,useMoralisFile,useMoralisQuery, etc. which makes it easy to use the Moralis SDK in our project.
Bonus - Starter Kits and Resources
I've created a Next.js and Hardhat starter kit that can be found here - https://github.com/tarun-soni/next-hardhat-setup
Here are some starter kits which you can use to quickly get up and running.
create-eth-app
ethereum-boilerplate
and some resources to learn web3
useweb3.xyz
Some web3 resources compiled by me
Congrats! 🎉 You have successfully set up your local development environment. You can customize it according to your needs and requirements.
Conclusion
This article covered how you can set up a local development environment for creating a decentralized application(dApp), which you can further customize to suit your needs.
Hope you enjoyed reading this article and found it helpful. Cheers! 🥂
