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:
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:
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 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
For a smart-contracts to be deployed when
truffle migrate is run it must be called with
/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.:
For more info on Truffle and how it works please read the documentation.
For more info on Parity and how it works please read the wiki.
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.
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:
truffle-contractfor better Ethereum contract abstraction
My 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