Martin Wagner

Deploy static sites and Dapps using swarm and ENS

Ethereum and the ecosystem around it, are often referred to as the new World Wide Web, the “web3”. While the Web 2.0 brought more user interaction and collaboration the major change this time is decentralization: peer to peer networks instead of huge servers and blockchains instead of databases. Although I am not convinced by everything that is happening in this field I still wanted to take a look at this shiny and currently a little bit unstable ecosystem and the new things it may bring us in the future.

For the first project, I deploy my personal homepage using swarm and ENS. Swarm is a decentralized network that stores data on multiple nodes to provide failure and censorship resistance. It is often compared to IPFS which has a similar goal. ENS, one other hand, is a decentralized name registry on the Ethereum blockchain that works a bit like DNS. Unlike traditional DNS it is not required to pay for this name, instead, some money has to be locked in the ENS smart contract for the time of the registration. If you have already installed the Mist wallet and you want to see the result just enter bzz://martin-wagner.eth to load my homepage using swarm.

This setup is especially interesting for Dapps that already interact with the Ethereum blockchain and need a place to host their front end code.

Deploying to swarm

There are at least two ways of doing this. If you prefer GUIs you can use Mist, the Ethereum browser, if you are more of a terminal guy there is also a CLI tool.

GUI

To upload your files to swarm open Mist, wait for it to sync, click Account > Upload to swarm and select your file or folder. When the operation is completed a browser window with the hash as address should open.

CLI

Download geth which should include the geth and swarm binaries. The following will probably fail if Mist is running in the background and already using the ports geth binds to.

$ # create a new account and remember the address
$ geth account new
$ # start the geth node and let it sync
$ geth

In a new terminal:

$ # Start the swarm node and provide the address you generated above
$ swarm --bzzaccount $YOUR_ADDRESS

Finally in yet another terminal:

$ # upload the files. "site" is the directory with all web resources
$ swarm --recursive --defaultpath site/index.html up site
$ # the $CONTENT_HASH should be printed to the console

View the uploaded files

The recent version of Mist supports viewing swarm content directly in the Dapps browser, if you have it installed you just have to enter bzz://$CONTENT_HASH into the address bar.

If you use the CLI and don’t have Mist installed you can enter http://localhost:8500/bzz:/$CONTENT_HASH into your normal browser while the swarm node is still running.

Setup ENS

Making yourself a name

If you haven’t yet registered an ENS the easiest way is to use Mist since it already includes all resources and links. As an alternative it is, of course, possible to do this using the CLI, the ENS wiki has instructions for that. If you don’t want to wait for the auction process to take place or don’t have any ether it is also possible to get a .test domain on the testnet in less than a minute. This faucet can be used to get free testnet coins.

Configure the ENS record

As the last step, the ENS resolver has to be informed about the content hash we received earlier. Again if Mist is used this is very simple since the ENS manager app includes a field to just enter this information.

Without Mist the geth console can be used to set everything up:

$ geth console # or `geth attach` if the geth server is still running
> loadScript('ensutils.js') # available at https://github.com/ethereum/ens
> personal.unlockAccount(eth.accounts[0])
> ens.setResolver(namehash('NAME.eth'), publicResolver.address, {from: eth.accounts[0], gas: 100000})
> publicResolver.setContent(namehash('NAME.eth'), '$CONTENT_HASH', {from: eth.accounts[0], gas: 100000})

As soon as all calls to the registrar and resolver are completed you can use NAME.eth instead of $CONTENT_HASH as address for your site.