Publish a React App to IPFS using Fleek

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!

--

--

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.