Decentralized Front-End with IPFS

Intro

As I learn more and more about blockchains, peer to peer, and decentralized applications. I wonder how hard it would be to deploy a site on a decentralized way and make it accessible to others.

Disclaimer. I am new to this and i am by no means an expert… Now let’s continue.

Developer Experience

Storing a website on IPFS is not as simple as it seems the website cannot have absolute links like the example below or it will give you problems accessing it or even deploying it. When doing it on pinata.app to illustrate what i mean see below.


This is Bad Practice ---->
<a href="https://ronnycoste.com/" 
	target="_blank" rel="noopener noreferrer" 
	class="home__social-icon">
Link
</a>

It will provoke errors like these:

To solve this errors Matt Ober co-founder of pinata and the IPFS service that I am using wrote

The important rules are: 1. All of the content for your website must be contained in one build folder, with an index.html file. 2. All links within your files should be relative links.

These are some examples of good links, ie. relative links.


Good ---->
<link rel="stylesheet" href="font-awesome.min.css">


Good ---->
<img src="assets/img/rccolor.JPG" alt="Ronny Coste Photo" class="about__img"/>

But then how do you hyperlink to other websites? Do you just don't do it?

Well... it's not that simple... an HTML, CSS, and Vanilla Javascript needs to find a workaround using javascript and there are workarounds to it. I know this because I create an app with react and you can see the links are there (inside the red circle) the links works but not the UI elements. These react app you can also see how quirky and slow the gateway from pinata and IPFS can be.

This is another example of the slowness of IPFS but now with a HTML, CSS, And vanilla Javascript site.

Links workarounds

Using javascript to store the links. This is the workaround that i used and the one that worked the best for me with pinata, but never forget to test before making it to production.


<li>
  <a href="" target="_blank" rel="noopener noreferrer" 
		 id="blog" class="footer__link">
		Blog
	</a>
</li>


document.getElementById("blog").onclick = function () {
    location.href = "https://blog.ronnycoste.com";};

Custom domain

After the links are done and your website is showing in IPFS and loading as fast as the gateway lets you. Now it is time to add a custom domain. In this area is where cloudflare sucks the most.

These are the steps that I went through:

First you have to create your cname for your domain or in my case a subdomain of my main domain. Regular step for any DNS. After the CNAME is create and pointing to a IPFS gateway.

Second you have to create a txt _dnslink.Your.domain file that points to your CID of your site.

Third ???? Nothing happened.

After nothing happened I decided to delete the files and try again but here is the crazy part and what really annoyed me. Cloudflare doesn’t allowed to delete these files associated with Web3.

Cloudflare DNS dashboard

CNAME file

_dnslink file

Cloudflare Web3 DNS dashboard (IPFS Gateway dashboard)

hostname that has been on deleting for a day.

CNAME and TXT files that i cannot delete

All the other DNS files that i cannot delete even though i cannot used them. I can’t used them because my ipfs.ronnycoste.com hostname is being deleted… 🤯🤯🤯🤯

if you click that link it will work now because i am using a different provider now.

The good

There are many good reasons why you might want to go through all of these issues and quirks.

it is everywhere but nowhere at the same time.

Improving every day

Alternatives to cloudflare are popping up. like Fleek.

Benefits of working as your own personal server but with Amazon and google scale.

Permissionless, and trustless. No need to ask for permission as you can host your own node. no need to trust anyone as everyone has access to the same information at the same time.

The bad

There are just as many good reasons why you might not want to go through all of these issues and quirks.

Slow response time.

Still in development.

Having to develop with IPFS compatibility in mind.

Cloudflare sucks for web3.

Not a straight-forward route for CI/CD.

Is there a better way?

Yes! as i was writing these post I found fleek. I started trying as soon as I found out and some of my concerns that I had with the cloudflare / pinata approach are taking cared of. Fleek offers:

CI/CD on your deployed projects through Github, or any other method you prefer. ( personally I used Github)

IPFS Storage and CID

fast load speeds.

Easier pairing of custom domains. example: ipfs.ronnycoste.com is through there service.

Accepts lots of frameworks and libraries.

Fleek feels like vercel to me. So that is awesome that we are getting better tooling, integrations, and products for dev and people to tinker with. I love vercel and I hope i can say the same about fleek but for now i am still open minded to other alternatives.

If there is only one piece of information from this post that you should reminder is… do not use cloudflare for web3 development. At least at the amateur level.