Tutorial to create simple dapp using Truffle, webpack, html, This project Includes contracts, migrations, tests, user interface and webpack build pipeline.
-
Install Truffle globally.
npm install -g truffle
-
Download the box. This also takes care of installing the necessary dependencies.
truffle unbox react
-
Run the blockchain network using ganache-cli
$ ganache-cli
-
Add Simple Storage smart contract inside contracts folder. Compile and migrate the smart contracts.
truffle compile truffle migrate --reset
-
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.
// If inside the development console.
test
// If outside the development console..
truffle test
-
Add the Html code to set and get value of contract inside src/app.js folder.
-
Run the webpack server for front-end hot reloading . Smart contract changes must be manually recompiled and migrated.
// Serves the front-end on http://localhost:8080 npm install npm run dev
-
How do I use this with the EthereumJS TestRPC?
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 lines 96 and 98 of
app/javascripts/app.js
. -
I'm encountering this error: Error: Can't resolve '../build/contracts/Demo.json'
This means you haven't compiled or migrated your contracts yet. Run
truffle develop
,compile
andmigrate
first.Full error:
ERROR in ./app/main.js Module not found: Error: Can't resolve '../build/contracts/Demo.json' in '/Users/tim/Documents/workspace/Consensys/test3/app' @ ./app/main.js 11:16-59