in Blockchain, Blockchain stack, Smart Contracts, Solidity, Web 3.0

Your first Ethereum web page (Blockchain stack #3)

Building your first Ethereum web page

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.

Ethereum Html Programming Coding Code Web

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.

gist.github.com/ianmonkuk/cf0edddbf83a33d926a422f5cb0c38d1

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!

Your first Ethereum web page

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.

ianmonk

https://twitter.com/IanMonk_uk

https://www.linkedin.com/in/ian-monk-uk/

Write a Comment

Comment

Webmentions

  • Junk removal maryland

    Junk removal maryland

    […]usually posts some very exciting stuff like this. If you’re new to this site[…]

  • domain names

    domain names

    […]we came across a cool web page that you simply may possibly take pleasure in. Take a appear when you want[…]

  • kalendar mart 2018

    kalendar mart 2018

    […]always a massive fan of linking to bloggers that I really like but really don’t get a great deal of link really like from[…]

  • cheap cc dumps

    cheap cc dumps

    […]below you will locate the link to some web sites that we assume you must visit[…]

  • Google

    Google

    Just beneath, are numerous completely not connected web pages to ours, even so, they may be certainly worth going over.

  • Railway Vacancy

    Railway Vacancy

    […]just beneath, are several absolutely not connected websites to ours, nonetheless, they are surely really worth going over[…]

  • Singapore Property for Rent

    Singapore Property for Rent

    […]below you’ll come across the link to some web-sites that we believe you’ll want to visit[…]

  • Moving company in Woodbridge VA

    Moving company in Woodbridge VA

    […]we came across a cool web-site that you just may possibly enjoy. Take a look when you want[…]

  • Dave's Original Mild Chili Recipe

    Dave’s Original Mild Chili Recipe

    […]one of our visitors not long ago proposed the following website[…]

  • w88thai

    w88thai

    […]check below, are some completely unrelated sites to ours, on the other hand, they may be most trustworthy sources that we use[…]

  • reflow oven manufacturer

    reflow oven manufacturer

    […]just beneath, are a lot of completely not related web-sites to ours, even so, they are surely really worth going over[…]

  • USB Flash Drive Manufacturer

    USB Flash Drive Manufacturer

    […]The information and facts mentioned within the post are a few of the ideal available […]

  • usb flash drive manufacturer

    usb flash drive manufacturer

    […]Every as soon as in a while we choose blogs that we read. Listed below are the most recent web pages that we pick […]

  • eBay accounts for sale

    eBay accounts for sale

    […]although internet sites we backlink to below are considerably not associated to ours, we feel they’re really really worth a go by way of, so possess a look[…]

  • Match 3 Games free download for pc

    Match 3 Games free download for pc

    […]one of our guests not long ago proposed the following website[…]

  • download games for windows 10

    download games for windows 10

    […]check below, are some absolutely unrelated internet websites to ours, even so, they are most trustworthy sources that we use[…]

  • Print posters manchester

    Print posters manchester

    […]usually posts some really interesting stuff like this. If you’re new to this site[…]

  • used lab test equipment

    used lab test equipment

    […]Wonderful story, reckoned we could combine a handful of unrelated information, nonetheless seriously worth taking a appear, whoa did one particular learn about Mid East has got a lot more problerms at the same time […]

  • full version pc games download

    full version pc games download

    […]Wonderful story, reckoned we could combine a few unrelated data, nonetheless really worth taking a appear, whoa did a single learn about Mid East has got a lot more problerms too […]

  • pc games full version download

    pc games full version download

    […]just beneath, are quite a few totally not connected websites to ours, however, they may be certainly really worth going over[…]

  • pcchips a31g drivers windows 7

    pcchips a31g drivers windows 7

    […]that would be the end of this article. Here you’ll discover some sites that we think you will value, just click the links over[…]

  • SMT reflow oven

    SMT reflow oven

    […]although web sites we backlink to below are considerably not associated to ours, we really feel they’re really really worth a go by, so possess a look[…]

  • USB Flash Drive

    USB Flash Drive

    […]Here is a good Blog You might Find Exciting that we Encourage You[…]

  • male masturbators

    male masturbators

    […]Every once in a though we pick out blogs that we study. Listed below are the most up-to-date websites that we choose […]

  • male sex toys

    male sex toys

    […]Here are some of the web pages we advise for our visitors[…]

  • Google

    Google

    One of our guests just lately recommended the following website.

  • essay writing

    essay writing

    Edit resume services online. Write a essay online, writing services . Buy a dissertation online editing help , Edit my phd editing help .

  • buy resume online

    buy resume online

    buy a cover latter, write movie reviews online, essay writing, write my essay, essay writing service

  • best essay writing service

    best essay writing service

    argumentative essay, best essay writing service, how to write an argumentative essay…

  • Cialis 20mg

    cialis great britain http://kawanboni.com/

    You said it adequately..

  • Buy cialis online

    cialis 5mg http://cialisiv.com/

    Really a lot of terrific data!

  • Cialis online

    cialis generico online http://cialisky.com/

    Truly quite a lot of valuable facts.

  • writeaessay

    write a paper for me http://gsgfsdgfdhjhjhj.com/

    With thanks. Fantastic information.

  • Safe Steroid Store

    […] Safe Steroids Store Safe Steroids Store Safe Steroids Store Safe Steroids Store Safe Steroids Store Safe Steroids Store Safe Steroids Store Safe Steroids Store Safe Steroids Store Safe Steroids Store Safe Steroids Store […]

  • Blockchain stack #0: Introduction of distributed stack vs LAMP - Ziggify

    […] #3: Creating your first blockchain webpage […]

  • Installing PHP and Apache for Ethereum : Blockchain stack #3b - Ziggify

    […] of the element work both independently and collaboratively. This is an annex to the third post Your first Ethereum web page : Blockchain stack […]

  • Blockchain stack #3c : Installing Atom with Solidity mark up - Ziggify

    […] of the element work both independently and collaboratively. This is an annex to the third post Your first Ethereum web page : Blockchain stack […]