Publish a React App to IPFS using Fleek

To recap what IPFS is, you may read this article.

This article will guide you through the simple few steps to deploy your Single Page App (React App in our case) to IPFS.

First of all, you need to have a React app ready. If you don’t have one on hand, you can use create-react-app to create a simple application. In this example, we will deploy this simple Tic Tac Toe game.

Let’s get started!

Step 1:

You can write whatever you write in the code, just have to add the field homepage: '.' in the package.json. This homepage field will make the page work on IPFS gateways whose URLS are in the format /ipfs/[HASH] .

Step 2:

Push the code to GitHub repository.

Step 3:

Deploy the React App using Fleek. You may sign up with GitHub since it will request to connect your GitHub to grab your app code later.

Upon signing in on Fleek, click the “Add new site” button.

Next, we just have to input some information such as the repo branch, what commands to build the app, and the publish directory. After configuring it, click the “Deploy site” button.

Choose “IPFS” as the hosting service as the next input and click “Continue”.

That’s all! The application is in the progress of deployment now. It might takes a few minutes.

Result

We will be able to access our deployed app by clicking the generated URL, in my example, it will be yellow-band-0045.on.fleek.co.

To get the IPFS link, click “Verify on IPFS”. The link will look like this: https://ipfs.fleek.co/ipfs/QmVHTSevXSjqWAfssZkzvVpc85iubsZuXdabVB9HFX9zwT/.

We can also access the deployed app using Brave browser by visiting:

ipfs://QmVHTSevXSjqWAfssZkzvVpc85iubsZuXdabVB9HFX9zwT

Thanks for reading!

Software engineer, dreamer, another cat lover. Just share what I’ve learned.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

CSVs on Rails!

Buyer Incentives

Spotlight on SiSense: BI Without the Bandwidth

Arming the Use-After-Free()

Mental Model for Developers

Finding all possible permutations of small string in given large string

How to solve poor internet connection

learn Mercurial revision-control basics in 10 minutes if you know Git

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abby Low

Abby Low

Software engineer, dreamer, another cat lover. Just share what I’ve learned.

More from Medium

Saleor Community Update: November

Authentication with supabase in Nextjs

How to deploy your Next.js app on Cloudflare pages

What are the advantages of using ReactJS for modern web and app development?