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, set
ensmanager.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
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.
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> email@example.com 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
$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
Once all setup, you add the
build directory you just compiled into IPFS.
$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.,