4 min read - Posted 06 Dec 19

Create a "Hello World" fullstack dapp

This dapp implements a "Hello World" style application that echoes a message passed to the contract to the front end. This tutorial is intended to be followed using the online IDE available at, and selecting the "Hello World" template.

Select Hello World template

The smart contract

The first line, pragma solidity ^0.5.10 specifies that the source code is for a Solidity version greater than 0.5.10. Pragmas are common instructions for compilers about how to treat the source code (e.g., pragma once).

A contract in the sense of Solidity is a collection of code (its functions) and data (its state) that resides at a specific address on the Ethereum blockchain. The line string public message declares a public state variable called message of type string. You can think of it as a single slot in a database that you can query and alter by calling functions of the code that manages the database. The keyword public automatically generates a function that allows you to access the current value of the state variable from outside of the contract. Without this keyword, other contracts have no way to access the variable.

The constructor is a special function run during the creation of the contract and cannot be called afterward. In this case, it takes a string value initMessage, stores the value in the memory data storage area, and sets message to that value.

The update function is another public function that is similar to the constructor, taking a string as a parameter, and updating the message variable.

The Web app

This tutorial doesn't cover the HTML or CSS as it's not web3 specific, aside from the element IDs that the JavaScript manipulates. A lot of the JavaScript code follows standard patterns for object-oriented JavaScript, so this tutorial focuses on the web3js specific parts.

First create an instance of the smart contract, passing it as a property, which allows web3js to interact with it.

function HelloWorld(Contract) {
    this.web3 = null;
    this.instance = null;
    this.Contract = Contract;

Initialize the HelloWorld object and create an instance of the web3js library, passing Metamask as a provider for the contract. The initialization function then defines the interface for the contract using the web3js contract object and then defines the address of the instance of the contract for the HelloWorld object.

HelloWorld.prototype.init = function() {

    this.web3 = new Web3(
        (window.web3 && window.web3.currentProvider) ||
        new Web3.providers.HttpProvider(this.Contract.endpoint));

    var contract_interface = this.web3.eth.contract(this.Contract.abi);

    this.instance =;

Add other JavaScript boilerplate to create the instance of the HelloWorld object defined above, and show the HTML elements on the page:

HelloWorld.prototype.main = function() {

HelloWorld.prototype.onReady = function() {

var helloWorld = new HelloWorld(Contracts['HelloWorld']);

$(document).ready(function() {

The getMessage function gets the message value passed to the instance of the contract. With the IDE, you pass this value from the Configure option found under the disclosure triangle of the contract file, but outside of the IDE, you could pass the value in a variety of ways.

The getBlockNumber works similarly but uses the web3js


function to return the value of the latest block in the configured endpoint.

HelloWorld.prototype.getMessage = function(cb) {
    this.instance.message(function (error, result) {
        cb(error, result);

HelloWorld.prototype.getBlockNumber = function(cb) {
    this.web3.eth.getBlockNumber(function(error, result) {
        cb(error, result);

The update function ties everything together, calling the two functions defined above, and setting the H2 tags to the values they return or showing an error message.

HelloWorld.prototype.update = function() {
    var that = this;
    this.getMessage(function(error, result) {
        if(error) {

        that.getBlockNumber(function(error, result) {
            if(error) {
            setTimeout(function() {that.update()}, 1000);
Created with Sketch.Content is"CC-BY-SA 4.0" licensed
Article On-chain
Article Author

Chris Ward

Technical Content Lead




Related Articles
A fullstack dapp for creating tokens

This dapp implements the simplest form of a cryptocurrency that uses the ERC-20 standard to define a token you can create and send to others. This tutorial is intended to be followed using the online IDE available at, and selecting the Coin template. Select Coin template The smart contract The contract allows only its creator to create new coins (different issuance scheme are possible). Anyone can send coins to each other without a need for registering with a username and pas

Chris Ward

06 Dec 19

Tips for Starting Dapp Development

Welcome to dapp Development Welcome to one of the most exciting areas in computer programming. The potential growth of the blockchain field is matched only by t


03 Feb 20