Integrating Blockchain with web applications, a technical guide (Part 1).

Edward Burton
Apr 13, 2018 · 11 min read
  1. Add an article here: https://medium-demo-drupal.blockbinder.com/node/add/article
  2. View the output appear live here: https://medium-demo-angular.blockbinder.com/Index:
  3. Introduction
  4. Configure 2 DO droplets
  5. Configure Drupal 8 and Angular 5
  6. Configure Multichain
  7. Write content from Drupal 8 to the blockchain
  8. Listen to incoming events in Angular from the blockchain (Part 2)
  9. More stuff! (Part 2)

Chainfrog are really happy and excited by the interest we’ve been getting in our blockchain activity recently. Having developed a patented database synchronization tool to share data securely via blockchain, the strongest feedback we’ve received is a desire to see ‘under the hood’. As I can’t give away our IP, I have removed our tool from the middle and have a full end to end demonstration for using blockchain as a web communication protocol. If you want to read a bit about the ‘how’ and the ‘why’, feel free to revisit my previous blogs:

If you want to get your hands on the juicy code, read-on. This tutorial will allow you to be up and running with open-source tools in a few hours.


Step 1: Configure two Digital Ocean Droplets

Any experienced sys-admins can probably skip this part, but for a proper working blockchain we need two separate cloud nodes. I’m using DO because I have all the scripts prepared, but you could just as easily spin up two AWS micro-instances.

So, since this is a demonstration and we aren’t worried about performance, setup two of the smallest Ubuntu 16.04 instances that you can. Don’t forget you will need an SSH key configured on your local machine so that you have root access to your new droplets. After you have used the UI to setup the droplets with your SSH key, you should run the following commands on both droplets.


Step 2: Configure Drupal 8 standard install

An excellent resource for this step can be found here: https://www.rosehosting.com/blog/how-to-install-lemp-and-run-drupal-on-ubuntu-16-04/

Now we have a Drupal 8 site installed in on our webserver. We now need to configure the server so that we can access our new website. To follow this stage you will need a purchased domain and access to it’s DNS settings. We will use subdomains of the blockbinder domain for this demo.

In your DNS settings you will need to point a subdomain or domain at the public IP of each of your nodes. Then ->


Step 3: Configure Angular 5

Normally, you are best off installing and configuring Angular locally and then deploying on the server. As I already have the code written, I am going to write the code directly onto the Digital Ocean droplet.

https://medium-demo-angular.blockbinder.com, woohoo angular works!


Step 4: Install multi-chain

Login to the Drupal droplet:

Login to the Angular droplet

Back on Drupal

Now our blockchain is ready to transmit data, so we need to pass it some information using Drupal!

There are many ways to do this next step, the one I’ve chosen for the demo (an expressjs reverse proxy using multichain library) is adding a layer of complexity, as I could simply write from Drupal -> Multichain. However as this is the way I have chosen to communicate between Angular -> Multichain, I have decided to use it on both ends. Brave programmers can integrate Drupal into multichain directly through a custom module.

We need to add our reverse proxy to our nginx configuration

All going well, you should be able to go here: https://medium-demo-drupal.blockbinder.com/proxy and see an ‘works’ message!

Now we simply need our Drupal site to send data to the blockchain when we add data to the site.

Now we have our skeleton, just a little bit of code to add each added article to the blockchain:

Now for the moment of truth! If you have followed the steps successfully, when we add a new article to

To check that this is working, you can enter the multichain cli ->


Step 5 — Listen to multichain on node2 (Angular) PART 2 TBC

I will be posting part two of this article shortly, where we will use web sockets to import live data (in realtime of course!) from the blockchain into our Angular 5 webapp.

The more claps and interest I get this quicker it will arrive :)

Our training course!

Build with Blockchain is a training course getting hands-on with real practical applications of Distributed Ledger Technologies (DLT).

Led and designed by Dr Keir Finlow Bates, a serial blockchain inventor and leading figurehead of the blockchain community, we will take you through the code line by line, and soon you too will be able to deploy production ready private blockchain networks and understand what is going on behind the scenes.

The course can be found here: https://www.udemy.com/course/1918684. For a limited time only interested students add me on LinkedIn: Author LinkedIn link will be provided with a free access coupon to join the course! Please mention the course in your connection request.

At chainfrog we’ve been building and deploying scalable production blockchains for over 2 years, so if you are in need of some consultancy you can also get in touch either via email edward (at) chainfrog.com. These are exciting times and I hope you take something away from my article, feel free to connect with me on my twitter and LinkedIn accounts.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade