in Blockchain, Ethereum IDEs, Smart Contracts, Truffle

Truffle 3 – Ethereum DevOps using the Truffle Default Builder (Blockchain stack #4c)

This post will show you how to improve your Ethereum DevOps by using the Truffle Default Builder.  This builds on the previous tutorials showing you how to install and run Truffle and how to use the upgraded Truffle Ethereum Contract to abstract away some of the complexities.

Install the Truffle Default Builder

$ cd ~
$ npm install truffle-default-builder --save

Set up your truffle project to use the builder

Go into your Truffle directory and then you will need to create the following files and file structure with empty files under your truffle/myproject directory.

Truffle default build folder structure

A template of this has been created here on github templateApp-TruffleDefaultBuild.

cd ~Truffle/myproject
git clone https://github.com/ianmonkuk/templateApp-TruffleDefaultBuild.git
mv templateApp-TruffleDefaultBuild app

We now need to tell Truffle to use the Truffle Default Builder.  Update the ./truffle.js file as follows:
gist.github.com/ianmonkuk/791df5e10259f0d5bdd2bc6af057dd87

You can either delete the ‘from:’ account to allow Truffle to use your default account for any gas and contract owners, or set it to the account you want to use.

The final step is to create your initial index.html page and put it into the app directory you created above.  The git above included this file which gets the balance of account[2] and outputs it to the HTML body.
gist.github.com/ianmonkuk/8bc1b40ad14fe98ce5314ce36c933a41

Update this if you need to change the account it queries.  if you compare this to the index.html file from the previous two posts, you can see that this no longer loads the JSON file to create MetaCoin.  This has all been extracted away and is within the the app.js file.

Let’s build and deploy

Now let’s get truffle to build the contracts and the web app.

$ cd ~/Truffle/myproject
$ truffle migrate
$ truffle build

Hopefully if you have followed the previous two posts you should have a directory structure that looks like this (without the .git):

Truffle directory structure for example contract

The other benefit with Truffle is that it includes a built in webserver.  Truffle defaults to 8080 which will clash with your Parity browser server, so set the port to 8181.

$ truffle serve -p 8181

If you have been running Parity with Apache, you will need to stop Parity and restart it so that you can configure it to allow access from port 8181:

$ parity --chain dev --force-ui --jsonrpc-cors http://localhost:8181 --unlock 0x00a329c0648769A73afAc7F9381E08FB43dBEA72 --password ./.ethereum/password --reseal-min-period 0 --geth

Let’s open the web page to check it worked http://localhost:8181

Truffle web server

Testing Truffle DevOps

The truffle serve process will continuously monitor the files within the Truffle project and recompile and deploy all the necessary files to allow immediate testing (subject to the Blockchain network transaction confirmations).

Let’s now test that the DevOps automated process works.

Open the file MetaCoin.sol and add a variable, a getter function and an update in the constructor.  In the below I have changed lines 6, 11, 30-32.

gist.github.com/ianmonkuk/1e50fa2fc78c9c80eed92ddc388874ba

As soon as you save the update to the file you should see the output of the truffle serve process similar to this:

>> File contracts/MetaCoin.sol changed.
Rebuilding...
Compiling ./contracts/ConvertLib.sol...
Compiling ./contracts/MetaCoin.sol...
Writing artifacts to ./build/contracts

>> File build/contracts/ConvertLib.json changed.
>> File build/contracts/MetaCoin.json changed.
Completed without errors on Fri Feb 17 2017 16:07:29 GMT+0000 (GMT)
Rebuilding...
Completed without errors on Fri Feb 17 2017 16:07:29 GMT+0000 (GMT)

Now update the index.html to call this function.  Add this after the current call:

 MetaCoin.deployed().then(function(instance) {
 return instance.getOriginAddress.call();
 }).then( function(originAddress) {
 document.body.innerHTML = document.body.innerHTML + "<br>Origin Address " + originAddress;
 });

gist.github.com/ianmonkuk/8d2b9cb91f5eb4fb5d8880dc3eb0556b

The final step is to have truffle redeploy the contracts to the blockchain.  I’ve asked Truffle why this can’t be included in the auto updates by the serve process but they didn’t respond.

$ truffle migrate --reset

You should now be able to update the browser as see the owning address of the contract.

Ethereum Truffle WebOps in action

What is Truffle Default Builder doing?

  • It uses Browserify and other tools to consolidate all of the required node.js modules for Ethereum and any others you have placed in the app/javascript directory.  It puts them all into a single app.js file.  This is the only JS file that needs to be included in the HTML.
  • It loads the JSON contract files automatically and creates instances of the contracts and assigns them to JS objects with the same name.  There is no need for jQuery and getJSON, for example the following is immediately accessible MetaCoin.deployed().
  • All required files are copied from app into build and updated as necessary whenever any files change.  Running serve allows you to directly access the web app via a browser and quickly test.  (Although you still need to run migrate –reset to update the blockchain).

Write a Comment

Comment

Webmentions

  • Truffle 3 - Using Truffle Contract (formerly EtherPudding) (Blockchain stack #4b) - Ziggify

    […] next post in the series, Ethereum DevOps using the Truffle Default Builder, shows you how to make your Ethereum DevOps more efficient by using the Truffle Default […]