React + Material-UI + Truffle Box
Rapid Ethereum Dapp Development
This box contains everything you need to get started using smart contracts from a Rect app with the Material-ui library.
First, create a new empty directory and go to it.
npxand skip to step 3. This will install all necessary dependencies. A React app is generated a the
rootof the directory.
npx truffle unbox rouftom/truffle-react-material
Alternatively, you can install Truffle globally and run the
npm install -g truffle truffle unbox rouftom/truffle-react-material
Run the development console.
Compile and migrate the smart contracts. Note inside the development console we don't preface commands with
truffle.If you want to migrate your smart contract with a fresh blockchain state, you can run the command below.
--resetflag purge the blockchain state. Don't run the command with this flag in production unless you know what you are doing.
clientdirectory, we run the React app. Smart contract changes must be manually recompiled and migrated.
// in another terminal (i.e. not in the truffle develop prompt) npm run start
// inside the development console. test // outside the development console.. truffle test
For testing React components with Jest, you can install it as dev dependency. Compile your contracts before running Jest, or you may receive some file not found errors.
// ensure you are inside the client.old directory when running this npm install --save-dev @testing-library/react npm run test
To build the application for production, use the build script. A production build will be in the
// ensure you are inside the client.old directory when running this npm run build
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 need to update line 12 of
src/lib/Web3Context.js. You'll also need to update the line 10 of
src/lib/MyContractContext.jsdepending your network id.
Where is my production build?
The production build will be in the
dist/folder after running
npm run buildin the
Where can I find more documentation?
You can also find amazing royalty free illustrations on Manypixels
😊 Do you like this library ? Buy me a coffee or support me with a star on Github