[Ethereum] How would you integrate an Angular 2 CLI frontend project with a Truffle 2 project

The easiest way to manage a JavaScript application that talks to the blockchain is to use a development framework and deployment tool like Truffle.

Truffle takes care of giving you a way to run tests and migrations, and manage your contract definitions, including which addresses they are deployed to on each network. It also provides good tutorials that will help you learn to write applications that talk to the blockchain.

The most common examples of using Truffle will use its own build library for your whole application, but if you already have an existing React application, you probably already have your own build process using browserify, webpack or some other tool. In theory this can be integrated seamlessly with truffle, but it may be simpler, having got used to how Truffle works, to simply put it in a sub-directory of your own project and reference its libraries and the contract json files it builds directly.

See this project for an example. The original truffle directory contains contracts, migrations and contract tests, and running truffle migrate from inside that directory will deploy the contracts to the blockchain and store their definitions under its build directory. The truffle.js file defines the network it will deploy to, but not (unlike most Truffle tutorials) the web application HTML and JavaScript build process, since this is handled by the application's original system as defined in its package.json. The main front-end JavaScript loads the truffle-generated contract definitions, and interacts with them using tools found in the truffle-contract library.

You'll need to add a development section to the networks section in your project's truffle.js:

module.exports = {
  networks: {
    development: {
      host: "localhost",
      port: 7545,
      network_id: "5777"
    }
  }
};

Make sure you get the port and network ID correct. Those are the defaults, so if you change them in Ganache you will need to change them here as well.

To use this specified network, after building the contract files, you'd use the command

truffle migrate --network development