Truffle Quick Start Guide

Learn the fundamentals of Ethereum development

Nikhil Bhaskar

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781789136975
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Develop, test, and deploy decentralized applications for Ethereum platform

Key Features

• Build your first Ethereum Dapp with Truffle: the most popular Ethereum development framework
• Build, compile, and deploy smart contracts in your development environment
• Embrace Blockchains and utilize it to create new generation of secured and scalable apps

Book Description

Truffle is a world-class development environment, testing framework and asset pipeline for Ethereum, aiming to make life as an Ethereum developer easier.

If you are a web developer wanting to try your hand at developing Dapps with Truffle, then this is the book for you. This book will teach you to write smart contracts and build Dapps with Truffle. You will begin with covering the basics of Truffle, briefly explaining how it integrates Solidity and Web3, in orderto start building a mini decentralized application. Also, you will dive into migration, testing and integrating Truffle with the use of popular JavaScript frameworks. Lastly, you will ship your decentralized application and package it into a product. Moreover, you will go through the best practices in Truffle, so as to increase your proficiency in building Dapps with Truffle.

By the end of the book, you will be able to write smart contracts and build decentralized applications with Truffle on Ethereum blockchains.

What you will learn

• Understand the fundamentals of Truffle and Web3
• Build a decentralized application with Truffle, while choosing the correct Ethereum client
• Connect your Dapp to Ethereum clients including Geth, Parity, and Ganache
• Migrate and test your Dapp with the correct networks such as Ropsten and Rinkeby
• Package a decentralized application into a user-friendly product by integrating Truffle with JavaScript frameworks such as Angular, React and Vue
• Explore tools including Ethereum Package Manager, the Registrar and browser wallets, and exploit third-party smart contract libraries.
• Evaluate the common migration pitfalls and how to mitigate them

Who this book is for

This book is for web developers who are interested in the new world blockchain. Some basic understanding of JavaScript and web services is required. No prior knowledge of Decentralized applications or blockchain is required.

Truffle and Popular JavaScript Technologies

This chapter will illustrate the use of Truffle with modern JavaScript technologies such as Angular, React, and Node. You will learn how to integrate Truffle with JavaScript frontend libraries and frameworks as well as on the backend with Node. This chapter will provide code snippets and examples for various frameworks, and highlight the integration similarities between all frameworks. Moreover, this chapter will cover the best practices that you can employ when integrating Truffle with a modern JavaScript framework, library, or technology.

More specifically, you will learn the following:

• How to integrate Truffle with Angular
• How to integrate Truffle with React
• How to integrate Truffle with Node

Up until now, we worked with Truffle without using a JavaScript frontend framework. We did this to focus on Truffle and learn how it works to combine web3, JavaScript, and Solidity, and not to allow complex JavaScript frameworks to distract us. However, it is crucial to work with a modern, robust, and scalable JavaScript framework when writing a real-world, decentralized application.

What are some of the most common JavaScript frameworks or libraries? The most used JavaScript technologies on the frontend are Angular and React. As for the backend, well, Node is the most commonly used runtime that enables us to write JavaScript server-side. So, in this chapter, you will learn how to integrate Truffle with Angular, React, and Node. We'll start with the frontend first, and in particular, Angular.

It is not necessary to complete this chapter in order. If you are not interested in Angular but only in React, say, you can skip to the Truffle and React section.

Technical requirements

You will be required to have basic knowledge of JavaScript and web development as well as Ethereum/blockchain. Finally, to use the Git repository of this book, the user needs to install Git.

The code files for this chapter can be found on GitHub:
https://github.com/PacktPublishing/Truffle-Quick-Start-Guide/tree/master/Chapter05

Check out the following video to see the code in action:
http://bit.ly/2K8mA8K

Truffle and Angular

Let's build a small Dapp using Truffle and Angular 4/5.

This is not meant to be a tutorial on the inner workings of Angular. If you are not familiar with Angular, I suggest you read up on it first; here is a good place to start: https://angular.io/tutorial.

Once you have a basic understanding of Angular, you are ready to begin this section.

Let's get started.

Like any good app, we need a robust and maintainable boilerplate before we start writing code. I've already set one up. Let's dive into the boilerplate.

angular-truffle-starter-dapp

You can find angular-truffle-starter-dapp here: https://github.com/PacktPublishing/Truffle-Quick-Start-Guide/tree/master/chapter5/truffle-angular. At the time of writing this book, angular-truffle-starter-dapp is the most used Angular and Truffle integration, with currently over 150 stars and 60 forks on GitHub.

Before we begin using this starter, we must ensure we have a folder to work out of. As usual, let's create some folders to begin working on this chapter.

Inside our truffle-practice folder, perform the following:

1. Create a new folder called chapter5
2. Go into chapter5 (cd chapter5)
3. Create a new folder called truffle-angular
4. Head over to the link mentioned above for the Angular-Truffle starter
5. Clone it inside the truffle-angular folder

Your truffle-angular folder structure should look like this—the important folders and files are bolded:

.
└── truffle-angular
 └── angular4-truffle-starter-dapp
 ├── CONTRIBUTING.md
 ├── README.md
 ├── build
 ├── contracts
 ├── e2e
 ├── karma.conf.js
 ├── migrations
 ├── package.json
 ├── protractor.conf.js
 ├── src
 ├── test
 ├── truffle-config.js
 ├── tsconfig.json
 └── tslint.json 

The contracts and migrations folders are there as usual—you should already be familiar with them. The truffle-config.js is where our networks are defined—have a look inside—but again, you should already be familiar with this.

One folder you may be unfamiliar with is the src folder. Let's take a look inside to learn and understand its structure.

Peeping into the src folder

The src folder structure should look something like this. I've highlighted the important folders in bold:

.
├── app
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ └── app.module.ts
├── assets
│ ├── demo.gif
│ └── logo.png
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── services
│ ├── meta-coin.service.spec.ts
│ ├── meta-coin.service.ts
│ ├── services.ts
│ ├── web3.service.spec.ts
│ └── web3.service.ts
├── styles.css
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
├── typings.d.ts
└── util
 ├── validation.spec.ts
 └── validation.ts

The app folder will contain all the root UI files for our app—the HTML, CSS, and Typescript files. We'll see how this works when we run this app. For now, it is important to note that our UI and component logic is housed in app.component.ts.

The services folder is where our web3 and MetaCoin services are. What is MetaCoin?

Well, if you peek into the contracts folder, you will see a contract called MetaCoin.sol. This is the main smart contract of this starter Dapp, and in fact, it's a common contract you will find in many Truffle starter apps including Truffle's own.

The web3.service.ts file involves instantiating web3 and setting its provider. The meta-coin.service.ts files involve creating a usable JavaScript abstraction of our smart contract, which allows us to interact with its public functions. We will see all of this in more detail very soon, but once again, we have already covered these concepts in previous chapters. The only difference here is that the code is inside an Angular environment.

Before we peep into the code, let's first run this project to get a feel for how it looks.

2323__perlego...