Skip to content

React Truffle Box

This box comes with everything you need to start using Truffle to write, compile, test, and deploy smart contracts, and interact with them from a React app.

Installation

First ensure you are in an empty directory.

Run the unbox command using 1 of 2 ways.

# Install Truffle globally and run `truffle unbox`
$ npm install -g truffle
$ truffle unbox react

# Alternatively, run `truffle unbox` via npx
$ npx truffle unbox react

Start the react dev server.

$ cd client
$ npm start

From there, follow the instructions on the hosted React app. It will walk you through using Truffle and Ganache to deploy the SimpleStorage contract, making calls to it, and sending transactions to change the contract's state.

FAQ

  • How do I use this with Ganache (or any other network)?

The Truffle project is set to deploy to Ganache by default. If you'd like to change this, it's as easy as modifying the Truffle config file! Check out our documentation on adding network configurations. From there, you can run truffle migrate pointed to another network, restart the React dev server, and see the change take place.

  • Where can I find more resources?

This Box is a sweet combo of Truffle and Webpack. Either one would be a great place to start!