How to build a DApp and host it on IPFS using Fleek

The deployment stage of an utility is a essential step throughout the improvement course of. Throughout this stage, the appliance goes from being hosted regionally to being obtainable to the target market anyplace on this planet.

With the rising use of blockchains in constructing functions, you may need puzzled how DApps, which work together with sensible contracts, are hosted.

Inside this tutorial, you’ll find out how to host DApps with Fleek by constructing a pattern decentralized pet adoption utility using React, Hardhat, and Alchemy. We’ll cowl:

What you want earlier than beginning this tutorial

This tutorial incorporates a number of hands-on steps. To comply with alongside, I like to recommend that you simply do the next:

• Set up React, which we are going to use to build the UI. I’m using React v14 on this tutorial
• Set up Hardhat, which we are going to use as our improvement atmosphere
• Create a free account for the Alchemy blockchain developer platform
• Create a free account for Fleek, which you’ll be taught extra about within the subsequent part
• Obtain the MetaMask browser extension

MetaMask is a cryptocurrency pockets that enables customers to entry DApps by a browser or cell app. Additionally, you will need a take a look at MetaMask account on an Ethereum testnet for testing sensible contracts. I’m using the Ropsten Take a look at Community on this tutorial.

What’s Fleek?

Fleek is a Web3 resolution that goals to make the method of deploying your websites, DApps, and companies seamless. At the moment, Fleek offers a gateway for internet hosting your companies on the InterPlanetary File System (IPFS) or on the Internet Computer (IC) from Dfinity.

Fleek describes itself because the Netlify equal for Web3 functions. As a consequence, you’ll find some options which might be comparable to Netlify, corresponding to executing builds using docker pictures and producing deployment previews.

According to the IPFS blog, “Fleek’s main goal for 2022 is to restructure its IPFS infrastructure to further decentralize and incentivize it. It will also include new Web3 infrastructure providers for different pieces of the web building stack.”

Fleek affords a resolution to an IPFS problem the place the hash of your web site adjustments every time you make an replace, thus making it troublesome to have a fastened deal with hash. After the preliminary deployment, Fleek will build, pin, and replace your web site.

Let’s begin constructing our pattern DApp within the subsequent part and deploy it using Fleek. We’ll host the DApp on IPFS.

Constructing a pattern DApp to deploy to Fleek

On this part, we are going to build a decentralized adoption monitoring system for a pet store.

If you’re accustomed to the Truffle Suite, chances are you’ll acknowledge some components of this train. The inspiration for this DApp comes from the Truffle guide. We’ll take issues a step additional by using Alchemy, Hardhat, and React.

To allow you to focus on writing the sensible contract and deploying the DApp, I’ve already constructed out the UI part and state. The sensible contract and React code can be contained in a single challenge.

Merely clone the React application from my GitHub repository to start writing the sensible contract:

git clone   

Subsequent, change the listing to the cloned folder and set up the dependencies listed within the bundle.json file:

# change listing
cd react-web3

# set up utility dependencies
npm set up

With the React utility arrange, let’s proceed to create the pet adoption sensible contract.

Creating the pet adoption sensible contract

Inside the react-web3 listing, create a contracts folder to retailer the Solidity code for our pet adoption sensible contract.

Using your code editor, create a file named Adoption.sol and paste within the code under to create the mandatory variables and features throughout the sensible contract, together with:

• A 16-length array to retailer the deal with of every pet adopter
• A perform to undertake a pet
• A perform to retrieve the deal with of all adopted pets

//SPDX-License-Identifier: Unlicense
// ./react-web3/contracts/Adoption.sol
pragma solidity ^0.8.0;

contract Adoption {
  deal with[16] public adopters;
  occasion PetAssigned(deal with listed petOwner, uint32 petId);

  // adopting a pet
  perform undertake(uint32 petId) public {
    require(petId >= 0 && petId <= 15, "Pet does not exist");

    adopters[petId] = msg.sender;
    emit PetAssigned(msg.sender, petId);
  }

  // Retrieving the adopters
  perform getAdopters() public view returns (deal with[16] reminiscence) {
    return adopters;
  }
}

Subsequent, create one other file named deploy-contract-script.js throughout the contracts folder. Paste the JavaScript code under into the file. The code will act as a script that makes use of the asynchronous getContractFactory methodology from Hardhat to create a manufacturing unit occasion of the adoption sensible contract, then deploy it.

// react-web3/contract/deploy-contract-script.js
require('dotenv').config()
const { ethers } = require("hardhat");

async perform foremost() {
  // We get the contract to deploy
  const Adoption = await ethers.getContractFactory("Adoption");
  const adoption = await Adoption.deploy();
  await adoption.deployed();

  console.log("Adoption Contract deployed to:", adoption.deal with);
}

// We suggest this sample to have the opportunity to use async/await in all places
// and correctly deal with errors.
foremost()
  .then(() => course of.exit(0))
  .catch((error) => {
    console.error(error);
    course of.exit(1);
});

Lastly, create a file referred to as hardhat.config.js. This file will specify the Hardhat configuration.

Add the next JavaScript code into the hardhat.config.js file to specify a Solidity model and the URL endpoint on your Ropsten community account.

require("@nomiclabs/hardhat-waffle");
require('dotenv').config();

/**
 * @sort import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  solidity: "0.8.4",
  networks: {
    ropsten: {
      url: course of.env.ALCHEMY_API_URL,
      accounts: [`0x${process.env.METAMASK_PRIVATE_KEY}`]
    }
  }
};

I’m using the atmosphere variables ALCHEMY_API_URL and METAMASK_PRIVATE_KEY to retailer the URL and personal account key values used for the Ropsten community configuration:

• The METAMASK_PRIVATE_KEY is related along with your MetaMask pockets
• The ALCHEMY_API_URL hyperlinks to an Alchemy utility

You may retailer and entry these atmosphere variables inside this react-web3 challenge using a .env file and the dotenv bundle. We’ll evaluation how to do that within the subsequent part.

When you’ve been following alongside efficiently, you haven’t but created an Alchemy utility at this level within the challenge. You will want to use its API URL endpoint, so let’s proceed to create an utility on Alchemy.

Creating an Alchemy utility

Alchemy offers options that allow you to join to an exterior distant process name (RPC) node for a community. RPC nodes make it doable on your DApp and the blockchain to talk.

Using your internet browser, navigate to the Alchemy web dashboard and create a new app.

Present a title and description for the app, then choose the Ropsten community. Click on the “Create app” button to proceed.

After the app is created, you’ll find it listed on the backside of the web page.

Click on “View Key” to reveal the API keys for the Alchemy app. Pay attention to the HTTP URL. I’ve redacted this info within the picture under.

Create a .env file inside your Hardhat challenge, as demonstrated under. You’ll use this .env file to retailer your Alchemy app URL and MetaMask personal key.

// react-web3/.env

ALCHEMY_API_URL=<ALCHEMY_HTTP_URL>
METAMASK_PRIVATE_KEY=<METAMASK_PRIVATE_KEY>

Substitute the ALCHEMY_HTTP_URL and METAMASK_PRIVATE_KEY placeholders above with the HTTP URL from Alchemy and your MetaMask personal key. Comply with the MetaMask Export Private Key guide to find out how to export this info on your pockets.

Lastly, execute the following command to deploy your pet adoption sensible contract to the required Ropsten community:

npx hardhat run contracts/deploy-contract-script.js --network ropsten

As proven within the picture under, notice the deal with that’s returned to your console after the contract is deployed. You will want this deal with within the subsequent part.

At this level, the pet adoption sensible contract has been deployed. Let’s now shift focus to the DApp itself and create features to work together with the pet adoption sensible contract.

Constructing the DApp frontend

Related to the pet store tutorial from the Truffle information, our DApp will show sixteen completely different breeds of canines that may be adopted. Detailed info for every canine is saved within the src/pets.json file. We’re using TailwindCSS to fashion this DApp.

To start, open the state/context.js file and substitute the present content material with the code under:

// react-web3/state/context.js

import React, {useEffect, useReducer} from "react";
import Web3 from "web3";
import {ethers, suppliers} from "ethers";

const {abi} = require('../../artifacts/contracts/Adoption.sol/Adoption.json')

if (!abi) {
    throw new Error("Adoptiom.json ABI file missing. Run npx hardhat run contracts/deploy-contract-script.js")
}

export const initialState = {
    isModalOpen: false,
    dispatch: () => {
    },
    showToast: false,
    adoptPet: (id) => {
    },
    retrieveAdopters: (id) => {
    },
};

const {ethereum, web3} = window

const AppContext = React.createContext(initialState);
export default AppContext;

const reducer = (state, motion) => {
    change (motion.sort) {
        case 'INITIATE_WEB3':
            return {
                ...state,
                isModalOpen: motion.payload,
            }
        case 'SENT_TOAST':
            return {
                ...state,
                showToast: motion.payload.toastVisibility
            }
        default:
            return state;
    }
};

const createEthContractInstance = () => {
    strive {
        const supplier = new suppliers.Web3Provider(ethereum)
        const signer = supplier.getSigner()
        const contractAddress = course of.env.REACT_APP_ADOPTION_CONTRACT_ADDRESS

        return new ethers.Contract(contractAddress, abi, signer)
    } catch (e) {
        console.log('Unable to create ethereum contract. Error:', e)
    }
}

export const AppProvider = ({youngsters}) => {
    const [state, dispatch] = useReducer(reducer, initialState);

    const instantiateWeb3 = async _ => {
        if (ethereum) {
            strive {
                // Request account entry
                return await ethereum.request({methodology: "eth_requestAccounts"})
            } catch (error) {
                // Consumer denied account entry...
                console.error("User denied account access")
            }
        } else if (web3) {
            return
        }
        return new Web3(Web3.givenProvider || "ws://localhost:8545")
    }

    const adoptPet = async id => {
        strive {
            const occasion = createEthContractInstance()
            const accountData = await instantiateWeb3()

            await occasion.undertake(id, {from: accountData[0]})

            dispatch({
                sort: 'SENT_TOAST', payload: {
                    toastVisibility: true
                }
            })

            // shut success toast after 3s
            setTimeout(() => {
                dispatch({
                    sort: 'SENT_TOAST', payload: {
                        toastVisibility: false
                    }
                })
            }, 3000)
        } catch (e) {
            console.log("ERROR:", e)
        }
    }

    const retrieveAdopters = async _ => {
        strive {
            const occasion = createEthContractInstance()
            return await occasion.getAdopters()
        } catch (e) {
            console.log("RETRIEVING:", e)
        }
    }

    useEffect(() => {
        (async () => { await instantiateWeb3() })()
    })

    return (
        <AppContext.Supplier
            worth={{
                ...state,
                dispatch,
                adoptPet,
                retrieveAdopters
            }}
        >
            {youngsters}
        </AppContext.Supplier>
    );
};

Studying by the code block above, you’ll observe the next:

The Ethereum and Web3 objects are destructured from the browser window. The MetaMask extension will inject the Ethereum object into the browser.

The createEthContractInstance helper perform creates and returns an occasion of the pet adoption contract using the contract’s ABI and deal with from Alchemy.

The instantiateWeb3 helper perform will retrieve and return the consumer’s account deal with in an array, using MetaMask to confirm that the Ethereum window object is outlined.

The instantiateWeb3 helper perform can be executed in a useEffect hook to make sure that customers join with MetaMask instantly after opening the appliance within the internet browser.

The adoptPet perform expects a numeric petId parameter, creates the Adoption contract occasion, and retrieves the consumer’s deal with using the createEthContractInstance and instantiateWeb3 helper features.

The petId parameter and consumer account deal with are handed into the undertake methodology from the pet adoption contract occasion to undertake a pet.

The retrieveAdopters perform executes the getAdopters methodology on the Adoption occasion to retrieve the deal with of all adopted pets.

Save these adjustments and begin the React improvement server to view the pet store DApp at

At this level, features throughout the adoption contract have been applied within the state/context.js file, however not executed but. With out authenticating with MetaMask, the consumer’s account deal with can be undefined and all buttons for adopting a pet can be disabled, as proven under:

Let’s proceed to add the pet adoption contract deal with as an atmosphere variable and host the DApp on Fleek.

Deploying the React DApp to Fleek

Internet hosting a DApp on Fleek could be carried out by the Fleek dashboard, Fleek CLI, and even programmatically using Fleek GitHub Actions. On this part, you’ll find out how to use the Fleek CLI as we host the pet store DApp on IPFS by Fleek.

Configuring the Fleek CLI

Execute the command under to set up the Fleek CLI globally on your laptop:

npm set up -g @fleek/cli

To make use of the put in Fleek CLI, you want to have an API key for a Fleek account saved as an atmosphere variable in your terminal. Let’s proceed to generate an API key on your account using the Fleek internet dashboard.

Using your internet browser, navigate to your Fleek account dashboard and click on your account avatar to reveal a popup menu. Inside this menu, click on “Settings” to navigate to your Fleek account settings.

Inside your Fleek account settings, click on the “Generate API” button to launch the “API Details” modal, which is able to generate an API key on your Fleek account.

Take the generated API key and substitute the FLEEK_API_KEY placeholder within the command under:

export FLEEK_API_KEY='FLEEK_API_KEY'

Execute this command to export the Fleek API key as a non permanent atmosphere variable on your laptop terminal. The Fleek CLI will learn the worth of the FLEEK_API_KEY variable whenever you execute a command towards your Fleek account.

Initializing a web site by the Fleek CLI

You want to generate the static recordsdata for the React DApp regionally earlier than you possibly can host the DApp and its recordsdata on IPFS using Fleek.

Producing the static recordsdata could be automated throughout the build course of by specifying a Docker picture and the instructions to be utilized in constructing your static recordsdata. Nevertheless, on this tutorial, you’ll generate the static recordsdata manually.

Execute the npm command under to generate static recordsdata for the DApp in a build listing.

npm run build

Subsequent, initialize a Fleek web site workspace throughout the react-web3 folder using the next command:

fleek web site:init

The initialization course of is a one-time step for every Fleek web site. The Fleek CLI will launch an interactive session guiding you thru the method of initializing the positioning.

Throughout the initialization course of, you can be prompted to enter a teamId, as seen within the following picture:

You’ll discover your teamId as numbers throughout the Fleek dashboard URL. An instance teamId is proven under:

At this level, the Fleek CLI has generated a .fleek.json file throughout the react-web3 listing with Fleek’s internet hosting configurations. One factor is lacking, nonetheless: the atmosphere variable containing the pet adoption sensible contract deal with.

Let’s proceed to see how to add atmosphere variables for regionally deployed websites on Fleek.

Including an atmosphere variable

Fleek allows builders to handle delicate credentials for his or her websites securely both by the Fleek dashboard or configuration file. As you’re regionally internet hosting a web site out of your command line on this tutorial, you’ll specify your atmosphere variable within the .fleek.json file.

Within the code under, substitute the ADOPTION_CONTRACT_ADDRESS placeholder with the pet adoption sensible contract deal with. Keep in mind, this deal with was returned after we created the Alchemy utility and deployed the sensible contract using the npx command earlier in this tutorial.

 {
  "site": {
    "id": "SITE_ID",
    "team": "TEAM_ID",
    "platform": "ipfs",
    "source": "ipfs",
    "name": "SITE_NAME"
  },
  "build": {
    "baseDir": "",
    "publicDir": "build",
    "rootDir": "",
    "environment": {
       "REACT_APP_ADOPTION_CONTRACT": "ADOPTION_CONTRACT_ADDRESS"
    }
  }
}

Notice: The SITE_ID, TEAM_ID, and SITE_NAME placeholders can be mechanically generated by the Fleek CLI within the .fleek.json file whenever you initialize a Fleek web site.

The code above additionally incorporates the next object, which it is best to add into the build object inside your .fleek.json file:

    "environment": {
       "REACT_APP_ADOPTION_CONTRACT": "ADOPTION_CONTRACT_ADDRESS"
    }

The JSON object above specifies a node docker picture to be utilized by Fleek in constructing the DApp. Throughout the build course of, the npm instructions within the command area can be executed.

Execute the command under to redeploy the DApp using the brand new build configuration within the .fleek.json file.

fleek web site:deploy

Congratulations! The DApp has been absolutely deployed, and you now can entry the stay web site by your internet browser. You may also get extra detailed details about the hosted DApp by the Fleek dashboard by following these steps:

• Navigate to your Fleek dashboard
• Click on the title of DApp you deployed
• See the deployed web site URL on the left
• See a deploy preview picture on the proper

Click on the positioning URL to open the DApp in a new browser tab. You’ll be prompted to join a MetaMask pockets instantly after the DApp is launched. After a pockets is related, it is possible for you to to undertake any of the sixteen canines by clicking the “Adopt” buttons.

That’s it! Your pattern pet adoption DApp has been deployed to Fleek.

Conclusion

On this tutorial, we centered on constructing and internet hosting a pattern DApp on IPFS by Fleek. The method started equally to the pet adoption sensible contract from Truffle’s information. Then, you took it a step additional by constructing a DApp to work together with the pet adoption sensible contract.

If you would like to leverage the steps inside this tutorial for internet hosting a production-ready DApp, I strongly suggest that you simply take into account the next:

First, be certain to join Fleek to a code host supplier, corresponding to GitHub, and deploy the DApp from a manufacturing department inside its repository. This can permit Fleek to mechanically redeploy the DApp whenever you push a new code commit to the deployed department.

Second, in case you are using a .fleek.json file to retailer atmosphere variables, embrace the .fleek.json filename in your .gitignore file. Doing this can make sure that the .fleek.json file shouldn’t be pushed and your atmosphere variables should not uncovered.

I hope you discovered this tutorial helpful. When you have any questions, be happy to share a remark.