如何使用 Fleek 构建 DApp 并将其托管在 IPFS 上

See how LogRocket's Galileo AI surfaces the most severe issues for you No signup required

The deployment stage of an application is a crucial step within the development process. During this stage, the application goes from being hosted locally to being available to the target audience anywhere in the world.

With the growing use of blockchains in building applications, you might have wondered how DApps, which interact with smart contracts, are hosted.

Within this tutorial, you will learn how to host DApps with Fleek by building a sample decentralized pet adoption application using React, Hardhat, and Alchemy. We will cover:

What you need before starting this tutorial

This tutorial contains several hands-on steps. To follow along, I recommend that you do the following:

Install React, which we will use to build the UI. I am using React v14 in this tutorial

Install Hardhat, which we will use as our development environment

Create a free account for the Alchemy blockchain developer platform

Create a free account for Fleek, which you will learn more about in the next section

Download the MetaMask browser extension

MetaMask is a cryptocurrency wallet that allows users to access DApps through a browser or mobile app. You will also want a test MetaMask account on an Ethereum testnet for testing smart contracts. I am using the Ropsten Test Network in this tutorial.

What is Fleek?

Fleek is a Web3 solution that aims to make the process of deploying your sites, DApps, and services seamless. Currently, Fleek provides a gateway for hosting your services on the InterPlanetary File System (IPFS) or on the Internet Computer (IC) from Dfinity.

Fleek describes itself as the Netlify equivalent for Web3 applications. As a result, you will find some features that are similar to Netlify, such as executing builds using docker images and generating 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 offers a solution to an IPFS challenge where the hash of your website changes each time you make an update, thus making it difficult to have a fixed address hash. After the initial deployment, Fleek will build, pin, and update your site.

Let’s start building our sample DApp in the next section and deploy it using Fleek. We will host the DApp on IPFS.

Building a sample DApp to deploy to Fleek

In this section, we will build a decentralized adoption tracking system for a pet shop.

If you are familiar with the Truffle Suite, you may recognize some parts of this exercise. The inspiration for this DApp comes from the Truffle guide. We will take things a step further by using Alchemy, Hardhat, and React.

To enable you to focus on writing the smart contract and deploying the DApp, I have already built out the UI component and state. The smart contract and React code will be contained in a single project.

Simply clone the React application from my GitHub repository to begin writing the smart contract:

git clone https://github.com/vickywane/react-web3

Next, change the directory to the cloned folder and install the dependencies listed in the package.json file:

# change directory cd react-web3 # install application dependencies npm install

With the React application set up, let’s proceed to create the pet adoption smart contract.

Creating the pet adoption smart contract

Within the react-web3 directory, create a contracts folder to store the Solidity code for our pet adoption smart contract.

Using your code editor, create a file named Adoption.sol and paste in the code below to create the necessary variables and functions within the smart contract, including:

A 16-length array to store the address of each pet adopter

A function to adopt a pet

A function to retrieve the address of all adopted pets

//SPDX-License-Identifier: Unlicense // ./react-web3/contracts/Adoption.sol pragma solidity ^0.8.0; contract Adoption { address[16] public adopters; event PetAssigned(address indexed petOwner, uint32 petId); // adopting a pet function adopt(uint32 petId) public { require(petId >= 0 && petId <= 15, "Pet does not exist"); adopters[petId] = msg.sender; emit PetAssigned(msg.sender, petId); } // Retrieving the adopters function getAdopters() public view returns (address[16] memory) { return adopters; } }

Next, create another file named deploy-contract-script.js within the contracts folder. Paste the JavaScript code below into the file. The code will act as a script that uses the asynchronous getContractFactory method from Hardhat to create a factory instance of the adoption smart contract, then deploy it.

// react-web3/contract/deploy-contract-script.js require('dotenv').config() const { ethers } = require("hardhat"); async function main() { // 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.address); } // We recommend this pattern to be able to use async/await everywhere // and properly handle errors. main() .then(() => process.exit(0)) .catch((error) => { console.error(error); process.exit(1); });

Finally, create a file called hardhat.config.js . This file will specify the Hardhat configuration.

Add the following JavaScript code into the hardhat.config.js file to specify a Solidity version and the URL endpoint for your Ropsten network account.

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

I am using the environment variables ALCHEMY_API_URL and METAMASK_PRIVATE_KEY to store the URL and private account key values used for the Ropsten network configuration: