Skip to content
A Truffle box with a superior React UI foundation for Ethereum Smart Contracts
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
webpack webpack configs Apr 7, 2019
.babelrc fix to .babelrc Jun 13, 2019
.eslintignore updated boilerplate Sep 27, 2018
.gitignore added license Mar 6, 2019 cleaned up readme May 30, 2019
truffle-config.js First commit Nov 20, 2017
truffle.js First commit Nov 20, 2017
yarn.lock added @babel/plugin-transform-runtime so async/await works May 30, 2019

Connect Ethereum Smart Contracts To A Superior UI Foundation

React Dapp Boilerplate is an expert React boilerplate for building full-stack DApps. It's built with the latest versions of React, Redux, and Webpack and has a superior organization and directory structure. It comes with a solid CSS architecture that helps you correctly skin your DApp.

Material-UI is baked into the boilerplate to help you quickly start prototyping your DApp. If you need expert guidance in developing a full-stack Dapp, check out Full Stack DApps now.

If you have any questions, join the Full Stack DApps Slack channel.

Also, watch the intro video on Youtube to learn more.


  1. Create a directory and change into it.

    mkdir your-react-dapp-name
    cd your-react-dapp-name
  2. Install the Truffle box inside of the directory your just created.

    truffle unbox hackingbeauty/react-dapp-boilerplate
  3. Start the dapp, then point your browser to localhost:3000. If you want to use yarn instead of npm, just nuke the node_modules directory and run the command yarn install.

    npm run start || yarn start
  4. Start your local blockchain (I use Ganache-CLI).

  5. Place your Smart Contract into the /contracts directory, then compile and migrate it.

    truffle compile
    truffle migrate
  6. Jest is included for testing React components and Truffle's own suite is incldued for Smart Contracts. Be sure you've compiled your contracts before running jest, or you'll receive some file not found errors.

    // Runs Jest for component tests.
    npm run test || yarn test
    // Runs Truffle's test suite for smart contract tests.
    truffle test
  7. To build the Dapp for production, use the build command. A production build of the entire Dapp will be placed in the /build folder.

    npm run build || yarn build
You can’t perform that action at this time.