Trufffle Box

Trufffle + Webpack + React

Truffle Boxes are helpful boilerplates that allow you to focus on what makes your dapp unique.

In addition to Truffle, React and Webpack, some Truffle Boxes contain lightweight scaffolding with react-router, authentication via your dapp’s smart contracts or uport, and minimal front-end views built with the Pure CSS framework.

Boxes

React Truffle Box

React

This box comes with everything you need to start using smart contracts from a react app. This is as barebones as it gets, so nothing stands in your way.

React Truffle Box

React, Redux and Authentication

This box adds react-router, redux and redux-auth-wrapper for authentication powered by a smart contract. Great for building your own auth system.

React Truffle Box

React, Redux and UPort Authentication

This box adds react-router, redux and redux-auth-wrapper for authentication powered by UPort. The easiest way to get started with UPort.

Installation

Installation is simple on every platform!

  1. Install truffle and an ethereum client. For local development, try EthereumJS TestRPC.
    npm install -g truffle // Version 3.0.5+ required.
    npm install -g ethereumjs-testrpc
  2. Download the truffle box of your choice with Truffle's unbox command. For official repos this is only the repo name, for others it's a github org or user/repo name (ex: status-im/truffle-box-status).
    truffle unbox [box]
  3. Install the node dependencies.
    npm install
  4. Compile and migrate the contracts.
    truffle compile
    truffle migrate
  5. Run the webpack server for front-end hot reloading. For now, smart contract changes must be manually recompiled and migrated.
    npm run start
  6. Jest is included for testing React components and Truffle's own suite is incldued for smart contracts. Be sure you've compile your contracts before running jest, or you'll receive some file not found errors.
    // Runs Jest for component tests.
    npm run test
    
    // Runs Truffle's test suite for smart contract tests.
    truffle test
  7. To build the application for production, use the build command. A production build will be in the build_webpack folder.
    npm run build

FAQ