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

makoto_inoue
Jun 21, 2019 · 4 min read

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.

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.

This is pretty much the only big change I had to make
$npm run build> ens-app@1.0.0 build /Users/makoto/work/ens/ens-app
> CI=false react-scripts build
$cd build
$python -m SimpleHTTPServer

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).

$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%
$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.

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.

The Ethereum Name Service

News about the Ethereum Name Service (ENS).