Description

Everything contained in this repository is in draft form and subject to change at any time and provided for information purposes only. LaunchPAD does not guarantee the accuracy of the information contained in this repository and the information is provided “as is” with no representations or warranties, express or implied. This code is owned and copyrighted by LaunchPAD and cannot be used by anyone for any purpose.

Description:

Command-line tool to initialize a Dapp frontend with a complete development toolchain.

Eventually, several toolchains will be available from which to select.
Currently, the following are implemented:

• react
  • React + Sass + Webpack
  • file watchers that trigger Webpack to rebundle .js and .css
  • http server (localhost:3000)
• ng2
  • Angular 2 + Sass + Webpack
  • file watchers that trigger Webpack to rebundle .js and .css
  • http server (localhost:3000)

Within each toolchain, the example Dapp is a rewrite of the MetaCoin Dapp that's used as an example (boilerplate) by Truffle.

Installation:

npm install -g @launchpadinc/dapp-frontend
npm install -g @launchpadinc/dapp-deploy

# needed to initialize the `react` toolchain
npm install -g create-react-app
npm install -g node-sass

# no additional global dependencies are needed to initialize the `ng2` toolchain

Example:

# start: Ethereum JSON-RPC server
mnemonic='foo bar baz'
lxterminal -e testrpc -m "$mnemonic"

# create a new/empty frontend project directory
mkdir ~/react_frontend_dapp
cd ~/react_frontend_dapp

# initialize a new frontend (boilerplate) project having a `react` toolchain
dapp frontend react

# notes:
#   - in the example projects, compiled contracts are located within the frontend dapp workspace.
#   - in a more realistic workflow, compiled contracts would be located in `@dapphub/dapp` project workspace (./out) separate from the frontend
#   - contract deployment requires: *.abi, *.bin
#   - frontend (web3.js) requires: *.abi.json, *.deployed.json

backend_contracts_dir='./src/contracts/dapp-backend'
compiled_contracts_dir="${backend_contracts_dir}/out"

frontend_contracts_dir='./src/contracts'

# optional:
# recompile all Solidity contracts
rm ${compiled_contracts_dir}/*
(cd $backend_contracts_dir; dapp build)

# optional, required if Solidity contracts were recompiled:
# delete all frontend ABI data and save a fresh copy: *.abi.json
rm ${frontend_contracts_dir}/*.abi.json
cp ${compiled_contracts_dir}/*.abi ${frontend_contracts_dir}/
rename 's/\.abi$/.abi.json/' ${frontend_contracts_dir}/*.abi

# optional:
# delete metadata for all previous contract deployments
rm ${frontend_contracts_dir}/*.deployed.json
# optional, required if a new instance of `testrpc` was started:
# deploy contracts and save metadata: *.deployed.json
dapp deploy -i $compiled_contracts_dir -O $frontend_contracts_dir'/{{contract}}.deployed.json'

# start: http server and file watcher (.js, .css)
lxterminal -e npm start

# start: file watcher (.scss)
# notes:
#   - at launch, it will recompile (.scss => .css)
#   - the new .css bundle will trigger webpack to rebundle the .js
#   - this new .js bundle will contain the updated contract deployment addresses
#   - the browser will display 10000 "MetaCoin" tokens as available balance (in account index #0)
lxterminal -e npm run watch-css

# open Dapp in Chromium browser w/ "MetaMask" extension
# in "MetaMask":
#   - Localhost 8545
#   - Settings > Reveal Seed Words
#         produces the $mnemonic used to initialize `testrpc`
# this ensures that both Ethereum clients are sharing the same accounts (on the same blockchain)
xdg-open 'http://localhost:3000/'

Notes (regarding the previous Example):

• the example was intended to illustrate the general procedure to initialize a new project using the "React" toolchain
• the procedure to initialize the "Angular 2" toolchain is nearly identical.
  • in this case, however, the file watcher for SASS (.scss) stylesheets is started along with the other watchers (.js, .css) when npm start is run
  • no separate command (ex: npm run watch-css) is needed to do so

Usage:

$ dapp-frontend --help

dapp-frontend command <directory_path>

Commands:
  react                                              initialize toolchain: 'React'
  ng2                                                initialize toolchain: 'Angular 2'

Options:
  --help                                             Show help [boolean]

Examples:
  dapp-frontend react ~/react_frontend_dapp          toolchain: 'React'
                                                     directory path: '~/react_frontend_dapp'
  dapp-frontend react                                toolchain: 'React'
                                                     directory path: '.'

copyright: LaunchPAD Inc. <github.com/launchpadinc>
license: 

Notes:

• This tool is intended to complement the dapphub/dapp toolchain, but it has no dependency on dapp.
• It uses vanilla web3.js to communicate with an Ethereum JSON-RPC server.
• It uses ABI data (.abi.json) to generate contract objects in javascript. This data is produced by the Solidity compiler (solc).
• It uses the addresses of deployed contracts (.deployed.json) to associate contract objects with the usable instances that exist in the blockchain. This data is produced by dapp-deploy.

Dependencies:

• As indicated in the Install instructions,
  some toolchains may require additional global dependencies
• note: this may change...

Executables:

• When dapp is installed, this tool can be invoked by the command: dapp frontend command <directory_path>
• When used standalone, it can be invoked by the command: dapp-frontend command <directory_path>
• Additionally, each toolchain can be invoked directly:
  • "React":
    create-react-dapp <directory_path>
  • "Angular 2":
    create-ng2-dapp <directory_path>