Template to create universal eth dapps powered by React/Redux/Drizzle/Open Zeppelin/ Infura / Aragon
GPL-3.0 License
Javascript Fatigue + Cloud Fatigue + Web3 Fatigue?
Here is the magic pill to solve all your symptoms.
Starter kit to develop universal Dapps with upgradeable smart contracts and powerful user interfaces.
Install latest Node (8+) & npm
Install babel
npm install --global babel-cli
Install eslint
npm install -g eslint
Install Truffle
npm install -g truffle
npm install -g ganache-cli
npm install -g create-react-app
brew install heroku/brew/heroku
heroku create -b heroku/nodejs -a <name>
Add mongodb to your heroku.
Run npm install in every folder:
cd client && npm install
cd ethwrapper && npm install
cd backend && npm install
Run garnache, backend and frontend in different terminals:
ganache-cli -b 3
cd backend && npm run dev
cd client && npm run start
The dApp should be running here http://localhost:3000
.
git push heroku master
ethwrapper/
: Contains standard truffle set up. See below for moreclient/
: React/Redux frontend app. Node package.backend/
: Node API backend. Node package.truffle init
inside the ethwrapper folder. The default Truffle directory structure contains the following:contracts/
: Contains the Solidity source files for our smart contracts. There is an important contract in here called Migrations.sol, which we'll talk about later.migrations/
: Truffle uses a migration system to handle smart contract deployments. A migration is an additional special smart contract that keeps track of changes.test/
: Contains both JavaScript and Solidity tests for our smart contractstruffle-config.js
: Truffle configuration filetruffle.js
: Another Truffle configuration file (soon to be deprecated)create-react-app
by running:npx create-react-app client
// For MacOS and Linux
cd src
ln -s ../../ethwrapper/build/contracts contracts
npm install drizzle --save
npm install drizzle-react --save
npm install drizzle-react-components --save
truffle.js
.npm install --save-exact openzeppelin-solidity
SASS
npm install node-sass --save
font-awesome
npm install --save font-awesome
// In index.js
import 'font-awesome/css/font-awesome.min.css';
bulma
npm install --save bulma
// In index.js
import 'bulma/css/bulma.css';
react-router
and react-router-dom
npm install react-router
npm install react-router-dom
// Modify app.js and create the router
Install backend packages. See package.json
for reference.
Used single heroku app setup for both apps