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...

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....

Truffle and React

Let's build a small Dapp using Truffle and React.

This is not meant to be a tutorial on the inner workings of React. If you are not familiar with React, I suggest you read up on it first—here is a good place to start: https://reactjs.org/tutorial/tutorial.html.

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

Let's get started.

The Truffle and React starter

As usual, let's start with a starter. You can get the Truffle and React starter right here: https://github.com/truffle-box/react-box.

If you skipped the Angular chapter, you need to do the following first. Inside your truffle-practice folder, create a new folder called chapter5.

Now that you have...

Truffle and Node

If you skipped the Angular chapter, you need to do the following first:

• Inside your truffle-practice folder, create a new folder called chapter5

Now, let's get started with Truffle and Node. First, create a new folder called truffle-node.

Inside the truffle-node folder, we need to initialize a Truffle project.

So, run the following command in your Terminal, while inside the truffle-node folder:

truffle init

Your truffle-node folder structure should now look like this:

.
├── contracts
├── migrations
├── test
├── truffle-config.js
└── truffle.js

To "run" this Truffle project, we need to have a JavaScript file to run as well as a package.json file that states our dependencies. To generate the package.json file, simply run npm init in your Terminal...

Summary

This was quite the chapter! We got our hands dirty with Angular, React, and Node. As you have seen, we did nothing new with web3 or Truffle. We simply interacted with them the way we have done before, with the only difference being that we were inside of Angular, React, and Node environments.

Being able to integrate Truffle and web3 with modern JavaScript frameworks is key to becoming a well-versed and seasoned smart contract developer. You're well on your way!

See you in the next chapter, where you will learn an essential skill that is useful not only when writing smart contracts, but production-level software in general—unit tests.