# 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`](https://nodejs.org/en/)
    
2. [`Ganache`](https://truffleframework.com/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:

```typescript
truffle init
```

Project structure for truffle

```typescript
<project-name>
└─ contracts/
│  └─ Migration.sol
└─ migrations/
│  └─ 1_initial_migration.js
└─ test/
   └─ truffle-config.js
```

or in the case of hardhat, run the following command:

```typescript
npx hardhat init
```

that will create a structure like this:

```typescript
<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,

```typescript
mkdir frontend
cd frontend
```

or you can directly initialize a new project in the current directory.

Create a new project by running

```typescript
npx create-react-app .
```

or for Next.js

```typescript
npx create-next-app .
```

### Step 5: We need a wallet to interact with the blockchain

A popular choice is Metamask. Install [Metamask](https://metamask.io) 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

```typescript
hardhat node
```

### Step 7: Install the required dependencies

```typescript
npm install web3
```

Openzeppelin provides secure smart Contracts in Solidity which can be imported and used in solidity, hence -

### Step 8: Installing [Openzeppelin](https://www.openzeppelin.com/)

```typescript
npm install @openzeppelin/contracts
```

### Step 9: Installing ipfs-http-client for file hosting

```typescript
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](https://remix.ethereum.org/) which is a web-based IDE for developing smart contracts.

Now, For hosting the app on a testnet or mainnet, we can use [Alchemy](https://www.alchemy.com/). 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](https://moralis.io).

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:

```typescript
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.

```typescript
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](https://github.com/paulrberg/create-eth-app)
    
2. [ethereum-boilerplate](https://github.com/ethereum-boilerplate/ethereum-boilerplate)
    

and some resources to learn web3

1. [useweb3.xyz](https://useweb3.xyz)
    
2. [Some web3 resources compiled by me](https://github.com/tarun-soni/web3-resources)
    

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