Storage solution providers are now leaning more toward decentralized platforms. It’s evident from TangleHUB’s Hub Cloud as it marks a race to edge past centralized platforms in terms of privacy, security, and cost. Developers have triggered this shift as they prefer to host both frontend and backend applications in decentralized platforms like Ethereum.
Hosting a frontend application to interact with a smart contract on a centralized platform is difficult. If the platform goes down, the web application stops functioning. And this is one of the major reasons that is spurring the uptake of decentralized platforms. These platforms operate with multiple nodes- one node’s failure does not hurt the entire web application. Besides, unlike a decentralized platform, hosting in a centralized requires infra provisioning and maintenance.
In this blog, I will walk you through the hosting process of frontend applications on a decentralized network like IPFS (Inter Planetary File System).
What is IPFS?
Hosting your frontend application is easy on IPFS. It is a distributed network for storing data. You can keep your files, websites, etc., on IPFS and access them from anywhere. IPFS uses a content-addressing mechanism to access the data. It generates an exclusive content hash for every content hosted on the network. If you change the data, the content identifier or the CID gets changed.
An IPFS network has many connected nodes that know how to get the data using the CID. These nodes are crucial in getting the content. For example, you must have come across many broken links on the internet as the internet currently uses location addressing instead of content addressing. But if there is a node available to serve the content and you are using IPFS content addressing, you will get the data even if you change the content of your website.
Ways to host a frontend application on IPFS
You can only host static sites on IPFS. There are two ways of doing it –
- Using Fleek hosting
Documentation: Fleek
Fleek has a hosting solution to deploy websites to IPFS in minutes. Fleek can connect to your GitHub repository, and build and host your web application on IPFS. - Directly using IPFS
You can do what Fleek is doing without using it. You can use IPFS to store the website, a pinning service to pin the IPFS website, and ENS to get the domain for your website.
How to host a frontend application using Fleek?
- Signup and login on to fleek https://app.fleek.co/
- Add a new site. Configure the Fleek to use your GitHub repos. You will get a notification to authorize – Fleek on GitHub.
- Once this is done, you will see the repos that you have authorized Fleek to use. Select the repo to use for deployment.
- Select the hosting service as IPFS.
- Provide the default branch, framework, build command, and the directory to publish the build.
- Deploy the site
Fleek will build the project and then deploy it on IPFS. You will get an IPFS hash once the project is deployed to IPFS. The site gets a free SSL certificate, CDN, and a Fleek preview URL. If you update your project, Fleek will do the automatic deployment. As the content of the project has changed, you will get a new IPFS hash. But Fleek sets the website URL to point to the new IPFS hash. E.g.
IPFS Hash: QmSAEW3nGfCq6R4BLk9xV9hMxnenZHRi6CMoXnUWkTPJxL
Web URL: React App (fleek.co)
Fleek provides the functionality to set/buy a custom domain, ENS. We should use ENS for our application instead of DNS. Read more about ENS here.
Host a frontend application without using Fleek
Fleek has simplified the entire process of deployment. But it may not give you clarity regarding what’s happening behind the scenes. To understand the process better, try hosting the frontend application without involving Fleek
- Download IPFS desktop.
- Open the IPFS desktop application and navigate to the files menu.
- Build your project and a build folder will be generated.
- Upload this build folder to IPFS.
- Pin the folder on the local node.
- Copy CID. You can now access the IPFS file using the browser. The format for the URL is:
ipfs://{CID}
e.g., ipfs://QmU1EaBsBaEhd9zrLBxdfeSadS4epoky9eKygtASGwY9PX - If this does not work in your browser, install IPFS companion or use IPFS gateway.
The format of the URL to access using the IPFS gateway is:
https://ipfs.io/ipfs/QmU1EaBsBaEhd9zrLBxdfeSadS4epoky9eKygtASGwY9PX
Pinning: Pinning makes the content available on multiple nodes. Pinning services run lots of IPFS nodes. So, even if one node goes down, it is available on other nodes. There are numerous pinning service providers available. See the list here.
IPFS desktop has support for pinning the files to a pinning service. You need to configure the pinning service by providing the secret key to access the pinning service. Once configured, you can pin the files to the pinning service.
The pinning will be queued. Once it is successful, you will see the CID of the file/folder on the pinning service.
This may take some time to complete. But once it is complete, your website will be available on multiple nodes, and it will be available even if you delete it from your local node.
How to set the domain name for our IPFS URL?
The frontend applications change too frequently. It is only possible to share the CID with users when the content changes. You can use IPNS, ENS, or DNSLink to get the content using the human-readable domain, pointing to the latest CID.
What is Ethereum Name Service (ENS)?
ENS is a naming system based on the Ethereum blockchain, and it is open and distributed. Using ENS, you can map Ethereum addresses, content hashes, etc., to human-readable names.
As DNS stores the domain records on a centralized server, it is prone to hacks. That is why you should use ENS instead of DNS for your dApp. You can register the .eth domain using https://app.ens.domains/. Once the domain is registered, you can create subdomains and map your domain/subdomain to the IPFS CID.
Conclusion
We have learned two ways to host the frontend for the smart contract applications on IPFS: Fleek and IPFS, pinning services, and ENS. Fleek is more straightforward as it abstracts everything you must do to host the application on IPFS. You can set up a fully decentralized frontend application based on the above-mentioned process. Please share your experience with us, and if you have any doubts, please reach out to us in the comments section.
