Truffle Box for React using Hooks¶
This Truffle Box is a base for working with the Truffle framework and React. It provides a working example of a simple counter contract with corresponding react components.
In order to run the Truffle box, you will need Node.js. Version 10.x.y works best and I've found it helpful to install nvm (https://github.com/nvm-sh/nvm). In order install these dependencies, you will also need Python (version 2.7.x) and git. You will also need the MetaMask plugin for Chrome.
- Install truffle and an Ethereum client. If you don't have a test environment, I recommend ganache-cli
npm install -g truffle npm install -g ganache-cli
Run your Ethereum client. For Ganache CLI:Note the mnemonic 12-word phrase printed on startup, you will need it later.
Download the box.
truffle unbox BrannanC/react_hooks_box
truffle-config.jsis configured to use your test environment.
This box is configured to automatically compile and migrate, but you may need to run the command again or
truffle migrate --resetif there were any snags in the unboxing process.
truffle compile && truffle migrate
- In order to connect with the Ethereum network, you will need to configure MetaMask
- Log into the
ganache-clitest accounts in MetaMask, using the 12-word phrase printed earlier. A detailed explaination of how to do this can be found here
- Point MetaMask to
ganache-cliby connecting to the network
Dependencies are automatically installed with Yarn. Run the app using Yarn:The app is now served on localhost:3000
Making sure you have configured MetaMask, visit http://localhost:3000 in your browser.
Jest is included for testing React components. Compile your contracts before running Jest, or you may receive some file not found errors.
// ensure you are inside the app directory when running this yarn run test
- To build the application for production, use the build script. A production build will be in the
// ensure you are inside the app directory when running this yarn run build