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://QmVHTSevXSjqWAfssZkzvVpc85iubsZuXdabVB9HFX9zwTThanks for reading!
