A starter boilerplate for an Ethereum dapp using web3.js v1.0, truffle, react, and parity
Includes an example Ethereum token implementation and UI!
This is a starter boilerplate Ethereum dapp I've put together using the following technologies:
This starter repository for building react/redux dapps uses the latest bleeding-edge Ethereum development technologies. Please note that the repository is still under development; I will be adding additional smart-contracts/UI examples.
Download the latest verion of Parity here.
Also ensure that you have the latest verion of Truffle installed globally:
npm install -g truffle
Finally install all package dependencies:
npm install
Run all of the following commands inside the project directory.
parity --chain dev --ws-origins "*"
Note: we set --ws-origins
so that we can use websockets to subscribe to blockchain events.
truffle compile && truffle migrate
NOTE: after running open parity (at http://127.0.0.1:8180/
) in a browser and confirm all of the transactions to complete the migration.
npm run dev
The first time it may take a little while to generate the first webpack-assets.json
and complain with a few dozen [webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
printouts, but be patient. Give it 30 seconds.
You're good to go! :) Now you can access the dapp at: http://localhost:3000
.
Redux Devtools are enabled by default in development.
If you have the Redux DevTools chrome extension installed it will automatically be used on the client-side instead.
If you want to disable the dev tools during development, set __DEVTOOLS__
to false
in /webpack/dev.config.js
.
DevTools are not enabled during production by default.
Please see the react-redux-universal-hot-example documentation
for an in-depth explanation of how the React/Redux portion of this dapp works.
Smart-contracts are written inside the /contracts
directory. The truffle compile
command then creates corresponding .json
files inside the /build/contracts
directory.
For a smart-contracts to be deployed when truffle migrate
is run it must be called with .deploy()
in /migrations/2_deploy_contracts.js
or any other migration file in the ./migrations
directory (note: you can add additional deployment files to this directory, simply increment the number at the beginning of the filename, e.g.: 3_anotha_one.js
).
For more info on Truffle and how it works please read the documentation.
The Web3.js Javascript library that is used in the React/Redux portion of the dapp to interact with the Ethereum smart-contracts running on the Parity test chain via a websocket.
For more info on Parity and how it works please read the wiki.
After running truffle migrate
, the 2_deploy_contracts.js
migration script will create an addresses.json
file inside of the newly created /build/contracts
directory that will simply contain a JSON object of the current deployment addresses of the dapp's smart-contracts.
The loadContractABI
API is used to get the Application Binary Interface (ABI) for the smart-contracts from their JSON files. It runs on the server-side of the app as it's easier to access the file-system that way.
Planned future additions:
web3.eth.getStorageAt
method on StorageExample
smart-contracttruffle-contract
for better Ethereum contract abstractionMy aim is for this to function as both a learning resource and also a useful boilerplate for starting new projects. I am more than happy to accept external contributions to the project in the form of feedback, bug reports and even better - pull requests :)
If you would like to submit a pull request, please make an effort to follow the guide in CONTRIBUTING.md.
Thanks for checking this out.
Created by: – Leopold Joy, @leopoldjoy