Your first Ethereum web page (Blockchain stack #3)

Published in

Ziggify

3 min readFeb 16, 2017

I hope building your first Ethereum web page is going to be an exciting experience for you! If you have been following the series, so far you should have built your first smart contract, installed Parity for the Ethereum Blockchain node, done a fast syn with Ropsten testnet and have Geth console up and running.

I’m writing a series of posts on the Blockchain Stack, giving simple but fully coded, step by step examples of how each of the element work both independently and collaboratively. This is the third post in the series, here you can find the intro Blockchain stack #0: Introduction of distributed stack vs LAMP.

Go ahead and Install Apache and PHP for Ethereum if you don’t already have it.

Optionally install Atom with Solidity language support, but you can leave this for later if you like.

Ethereum JavaScript API (web3.js)

We are now going to install Ethereum JavaScript API (web3.js) which can be used by web pages to connect to your local Ethereum node (e.g. Parity).

We will use Bower web package manager to take care of the web3.js components.

$ npm install -g bower

Now install web3, using node package manager, to your local directory. Then create a directory for your test web page under apache and install the web3 components using Bower.

$ cd ~ 
$ npm install web3 
$ cd /var/www/html 
$ mkdir ethwebpage 
$ cd ethwebpage 
$ bower install -g web3

You should see the Ethereum files under /var/www/html/ethwebpage/bower_components

Copy simpleTest.html file shown below to the folder ethwebpage.

Start Parity, this time you need to enable cross origin requests using –jsonrpc-cors http://localhost because the web page is served from localhost:80 and the Parity node is running on localhost:8545, which browsers see as different servers.

$ parity --geth --chain ropsten --force-ui --jsonrpc-cors http://localhost

Well done!

Open your browser and enable the developer tools so that you can see the console log. Point your browser to http://localhost/ethwebpage/simpleTest.html. Congratulations, you have your first Ethereum webpage!

Next in the Blockchain stack series

Next in the series is Truffle 3 — Installing, deploying and running on Ethereum (Blockchain stack #4).

Ziggify Blockchain

There’s a team of us that have come together at Ziggify to work on a Blockchain play. We are in the exploration phase, so if you want to get involved or have an idea please get in touch. I’m based in London and enjoy chewing the Blockchain fat over a cuppa or a beer.