How to Host Your Dapp With IPFS+ENS and Access It Via EthDNS

4 min readJun 21, 2019

Introduction

People often ask me whether ENS can point to an IP address to host a website under yourname.eth. What I usually advise is to upload your website to a distributed content system such as IPFS or Swarm and make that available via ENS instead.

I’d never done that myself, so I copied ENS manager into IPFS, setensmanager.matoken.eth to resolve to it, and served it under http://ensmanager.matoken.eth.link via a lesser known ENS gem called EthDNS. Here is how I did it.

Step 1: Making changes to your app

Our app is based on create-react-app. Apart from the heavy use of GraphQL, I would say it is a pretty standard React app. We don’t use any dapp framework (such as Embark or Truffle) because the frontend app imports all smart contract ABI via npm packages.

The only big change you need to make is to change routing from BrowserRouter to HashRouter so that the URL will become /#/name/matoken.eth rather than /name/matoken.eth. This change applies not only when serving via IPFS but also to any hosting environment where you cannot set dynamic routing rule to redirect any url to / for SPA (single page app) with routing.

This is pretty much the only big change I had to make

Once the change is made, make sure the app works by running yarn start or npm run start. If your app is not broken, then you can run the build script just like any other project.

$npm run build> ens-app@1.0.0 build /Users/makoto/work/ens/ens-app
> CI=false react-scripts build

One thing I often do is to try to serve the built asset files under build outside of your react project to make sure it works. The easiest way to check is to serve via python's built in http server

$cd build
$python -m SimpleHTTPServer

If your app is working, then it should be ready to publish to IPFS.

Step 2: Publish your build file to IPFS

I don’t go into the detail of setting up and running the ipfs daemon (but it should be just a matter of ipfs daemon).

Once all setup, you add the build directory you just compiled into IPFS.

$cd ..
$ipfs add -r build
added QmRmZbHSSidZUNFjrBnKcp9JSxv9yx9abGtgbxEo1rbZLb build/200.html
....
added QmTDm1Eefrow9dYUtQXm2dsnMjx2eoUv5EwXtxnbcsTNxm build/static/media/yellowwarning.3bb0411e.svg
added Qma2DREgySELRPVtGsHwi519aYX51Mk6i57Sfc2ZkzJjWB build/static/js
added Qmcyit4och1e1mDw66vuwLwuNNayWqDK3XS7phecojiRu5 build/static
added QmSGKPTuRdhsvQmz2KFMgsNfBFaoxP6QTBVzAFKNuCJKrz build
 12.74 MiB / 12.74 MiB [===========================================================================================================================================================================] 100.00%

The last hash QmSGKPTuRdhsvQmz2KFMgsNfBFaoxP6QTBVzAFKNuCJKrz is the root hash of your project. Let's make sure it has all the files.

$ipfs ls QmSGKPTuRdhsvQmz2KFMgsNfBFaoxP6QTBVzAFKNuCJKrz
QmRmZbHSSidZUNFjrBnKcp9JSxv9yx9abGtgbxEo1rbZLb 2529  200.html
QmaSibqpd8RVpMXUdaDnseGeRWh6DYqzS4KjvttQCHdUZh 14160 android-chrome-144x144.png
QmcvAhioQFMEpZGd1Zhk7NYJbDkehtNnNubX76CYsaSooK 7372  apple-touch-icon.png
...
QmTuM7NhF7XVJvtBK74x6wKTVsLe5u5X4Dmtpd4HrnHhFb 291   site.webmanifest
Qmcyit4och1e1mDw66vuwLwuNNayWqDK3XS7phecojiRu5 -     static/

Step 3: Set contenthash to ENS

If you don’t have an ENS name at this moment, this is a great chance to register one now. Just go to the ENS Manager to register a new name, set up the Public Resolver, and add the IPFS has to your ENS record by choosing the “Content” record type.

Once set, it should show a link which points to ipfs gateway address.

Click the link and… tada! It shows our ENS manage app.

Step 4. Access it via EthDNS

If you open it via ENS contenthash supported browser/wallet (such as Status.im, Opera browser, or a browser with Metamask), you should be able to see the same content under ensmanager.matoken.eth . However, you cannot expect all your friends and family can see your content with ENS supported browser and this is where EthDNS comes in.

EthDNS is a project under development by Jim McDonald thanks to a dev grant from Protocol Labs. It is a fork of coreDNS server, and it connects to ENS to check if there’s a contenthash record in the ENS records for the given ENS name, and then serves content via the IPFS gateway.

The ENS team acquired the eth.link domain and points its DNS name server to the EthDNS server. As a dapp developer, you don’t need to do anything to set up. All you need to do (as a user) is to append .link to your ENS name in your browser (e.g., http://ensmanager.matoken.eth.link ).