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.
-
Create a directory and change into it.
mkdir your-react-dapp-name cd your-react-dapp-name
-
Install the Truffle box inside of the directory your just created.
truffle unbox hackingbeauty/react-dapp-boilerplate
-
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
-
Start your local blockchain (I use Ganache-CLI).
ganache-cli
-
Place your Smart Contract into the /contracts directory, then compile and migrate it.
truffle compile truffle migrate
-
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
-
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