meteor-dapp-boilerplate
A starting point for decentralized MeteorJS applications. Includes Ethereum.js, iron-router, Bootstrap 3, Font Awesome, LESS and more.
**Based off of Differential's meteor-boilerplate and Ethereum's meteor-dapp-wallet. Please note that this boilerplate is still in Alpha.
- Alpha
- Included Packages
- Installation
- Deployment
- File Structure
- Bootstrap and Less
- Favicons and Touch Icons
- Private Network
- Unit Testing
- License
Included Packages
Hosted Alpha
http://meteor-dapp-boilerplate.meteor.com
Installation
Clone this repo
$ git clone http://github.com/SilentCicero/meteor-dapp-boilerplate
Create an account with geth (create a passphrase):
$ geth account new
Start a local geth node instace (then hit 'enter' to promt passphrase input):
$ geth --rpc --rpcaddr="0.0.0.0" --rpccorsdomain="*" --mine --unlock=0 --verbosity=5 --maxpeers=0 --minerthreads="4"
Start the app using Meteor
$ cd meteor-dapp-boilerplate/app
$ meteor
File Structure
This file structure is largley based off of Differentials boilerplate, but with client-only directories. Client-only files are stored in the client directory. The public directory is for publicly accessible assets such as images and fonts. The i18n directory is for language files.
Bootstrap and LESS
The majority of Bootstrap can be customized with LESS variables. If you look in client/stylesheets/base/lib/bootstrap/variables.import.less you will see a slew of configuration variables that can be tweaked to drastically change the look and feel of your site without having to write a single line of CSS.
However we should avoid modifying the core Bootstrap Less files (in case we want to update them later), and should instead override the variables in our own LESS files.
For example, to change the color of all primary buttons and links, simply add a @brand-primary variable to stylesheets/base/variables.import.less:
// variables.import.less
@brand-primary: #DC681D;
If you'd like to override a feature of Bootstrap that can't be modified using variables, simply create a new file in the client/stylesheets/components directory named after the corresponding Bootstrap component (eg. buttons in this case), and make your changes there.
// buttons.import.less
.btn {
text-transform: uppercase;
}
After your file is ready, you need to import it into client/stylesheets/base/global.less. So, you would add in this statement:
@import '@{components}/buttons.import.less';
The reason that this is done is to avoid any issues when the LESS files are compiled into CSS. That way, if one component relies on another or you want a certain order for your components, you can avoid any issues.
Favicons and Touch Icons
Upload your image to http://realfavicongenerator.net/ and place the resulting images in public/images/favicons
Private Network
If you would like to test your dApp with a local private Ethereum node, a test-genesis.json file is provided in the app folder. This is an example command line to run your own private network:
$ geth --rpc --rpccorsdomain "*" --genesis test-genesis.json --networkid 1234 --mine --unlock 0
Unit Testing
All tests are stored in the app/tests directory. By default the Mocha testing framework is not installed, but some example tests are provided with this boilerplate. In order to activate Mocha/Velocity you must edit app/.meteor/packages and uncomment #mike:mocha to mike:mocha. A testing button will appear on the top right hand corner of your dApp. Remember to remove the mocha package for deployment and production.
Add Mocha/Velocity
$ meteor add mike:mocha
Remove Mocha/Velocity
$ meteor remove mike:mocha
Please refer to this page for more on unit testing in Meteor: https://velocity.readme.io/
License
Released under the MIT License, see LICENSE file.