Fleek Makes Deploying and Maintaining an ENS+IPFS Website Easier than Ever
Now that Cloudflare is running our eth.link ENS+IPFS gateway service, we're demonstrating our confidence in the new infrastructure and "eating our own dogfood" by maintaining a copy of the ENS Manager App on IPFS at https://app.ens.eth.link (or app.ens.eth/ if you have MetaMask, Opera, Brave, or another compatible browser). To do this, we’re using a great service called Fleek.
Here is a quick guide to how we did it so you can also deploy your website to ENS+IPFS.
- Turn your website into a Single Page App (SPA)
- Setup Continuous Integration (CI) on Fleek and transfer the Controller
- Set up the SSL certificate
1) Turn your website into a Single Page App (SPA)
One caveat of deploying a website onto IPFS is that IPFS doesn’t provide dynamic routing, so /swap URLs only work if you have the asset under the pass.
The way to workaround is to use the HashRouter (#) convention as you can see on Uniswap’s ENS+IPFS website.
In our dapp, we make it configurable to choose depending on the configuration like this.
2) Setup Continuous Integration (CI) on Fleek and transfer the Controller
Fleek makes it easy to build and integrate privacy, encryption, and p2p functionality into your sites, web & native apps. They not only natively integrate with IPFS but will also set the new IPFS contenthash automatically into ENS when you merge your PR into master.
To allow Fleek to update your ENS name’s Content record, you have to “Set up Fleek as ENS controller”.
(Note: ENS names have a distinction between Registrant and Controller. The Registrant of a name is the ultimate owner of the name and can set who the Controller is. The Controller is the account that can set the records for a name. This is useful in case you want someone else to be able to set a record for you but without totally giving up control of the name permanently. Fleek is making great use of this distinction: You make Fleek the Controller, so they can set your Content record for you automatically; but you are still the Registrant, and so are still the owner and can remove Fleek’s controls at any time.)
If you don’t personally own the ENS name you want to use (e.g. if you’re doing this for your project’s team), then you have to ask the owner to set the Controller manually from our ENS app as described in the technical doc.
It is amazing that Fleek pays the gas fee every time it updates the contenthash on ENS.
3. Set up SSL certificate (optional)
If you want the eth.link gateway link to your website to have an SSL certificate, and if you deploy your IPFS site to a second level ENS name (such as ens.eth), you don’t have to do anything: we already have *.eth wildcard SSL certificates set up.
If you manually update the Content record on your subdomain in our Manager app, you don’t have to do anything either as our Manager will tell Cloudflare to create a new certificate for each subdomain. For those subdomains, which had a Content record prior to the eth.link Cloudflare migration, we ran a batch script to request the certificates so you don’t have to do in most of the cases. If it’s missed out any, then you have to do the following by yourself.
When you let Fleek (or any other method which doesn’t use our ENS Manager App) to set a contenthash on a subdomain, then you need to click the “Request SSL certificate” button from ENS Manager App page. It shouldn’t take more than 30 seconds to create a new SSL certificate.
On the back of it, our site sends a PUT request tohttps://eth.link/names/{subdomain.yourdomain.eth}.link which creates a certificate if the given domain name exists and the contenthash is set. If you need to automate the process by yourself, you can do that, too.
This is it! Thanks to the effort of companies such as Fleek and Cloudflare, deploying ENS+IPFS websites and accessing them are as simple as ever.
