react-box

by truffle-box

truffle-box / react-box

Truffle, Webpack and React boilerplate.

476 Stars 162 Forks Last release: Not found MIT License 97 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Truffle Box

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.

Installation

First ensure you are in a new and empty directory.

  1. Run the

    unbox
    command via
    npx
    and skip to step 3. This will install all necessary dependencies. A Create-React-App is generated in the
    client
    directory.
    js
    npx truffle unbox react
    
  2. Alternatively, you can install Truffle globally and run the

    unbox
    command.
    javascript
    npm install -g truffle
    truffle unbox react
    
  3. Run the development console.

    javascript
    truffle develop
    
  4. Compile and migrate the smart contracts. Note inside the development console we don't preface commands with

    truffle
    .
    javascript
    compile
    migrate
    
  5. In the

    client
    directory, we run the React app. Smart contract changes must be manually recompiled and migrated.
    javascript
    // in another terminal (i.e. not in the truffle develop prompt)
    cd client
    npm run start
    
  6. Truffle can run tests written in Solidity or JavaScript against your smart contracts. Note the command varies slightly if you're in or outside of the development console. ```javascript // inside the development console. test

    // outside the development console.. truffle test ```

  7. Jest is included for testing React components. Compile your contracts before running Jest, or you may receive some file not found errors.

    javascript
    // ensure you are inside the client directory when running this
    npm run test
    
  8. To build the application for production, use the build script. A production build will be in the

    client/build
    folder.
    javascript
    // ensure you are inside the client directory when running this
    npm run build
    

FAQ

  • How do I use this with the Ganache-CLI?

    It's as easy as modifying the config file! Check out our documentation on adding network configurations. Depending on the port you're using, you'll also need to update line 29 of

    client/src/utils/getWeb3.js
    .
  • Where is my production build?

    The production build will be in the

    client/build
    folder after running
    npm run build
    in the
    client
    folder.
  • Where can I find more documentation?

    This box is a marriage of Truffle and a React setup created with create-react-app. Either one would be a great place to start!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.