React + Material-UI + Truffle Box

truffle react

Rapid Ethereum Dapp Development

Travis (.com) GitHub release (latest by date) GitHub code size in bytes

This box contains everything you need to get started using smart contracts from a Rect app with the Material-ui library.

Installation¶

First, create a new empty directory and go to it.

Run the unbox command via npx and skip to step 3. This will install all necessary dependencies. A React app is generated a the root of the directory.
```
npx truffle unbox rouftom/truffle-react-material
```

Alternatively, you can install Truffle globally and run the unbox command.

npm install -g truffle
truffle unbox rouftom/truffle-react-material

Run the development console.
```
truffle develop
```
Compile and migrate the smart contracts. Note inside the development console we don't preface commands with truffle.
```
compile
migrate
```
If you want to migrate your smart contract with a fresh blockchain state, you can run the command below. javascript truffle migrate --reset The --reset flag purge the blockchain state. Don't run the command with this flag in production unless you know what you are doing.
In the client directory, 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
```
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.
```
// 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 dist/ folder.
```
// 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.js depending your network id.
Where is my production build?

The production build will be in the dist/ folder after running npm run build in the root folder.
Where can I find more documentation?

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

This box is composed of Truffle, React, Material-UI, Webpack 5 and Babel 7

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