A Robust Development Stack for Your next dApp

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:

1. Frontend Framework for UI - React / Next.js

2. Wallet - Metamask

3. Libraries to interact with the blockchain - etherjs / web3.js along with Truffle or hardhat

4. Hosting - Infura, Alchemy

5. File hosting - IPFS, Filecoin

6. For writing and testing Solidity - Remix IDE

7. Local development - Ganache, Hardhat, Truffle

8. Testing - Truffle/Hardhat

9. Deployment - Alchemy

10. Authentication - Moralis

11. 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

1. Node.js

2. 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 -

Step 8: Installing Openzeppelin

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

• One click wallet connect with Metamask and other wallets

• Easy IPFS integration

• Web and Backend SDKs

We can install and use moralis package in our project by running the following command:

npm install moralis
npm install react-moralis // for using in react

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.

1. SERVER_URL

2. 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.

1. create-eth-app

2. ethereum-boilerplate

and some resources to learn web3

1. useweb3.xyz

2. 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! 🥂