gitter-badger / techtonic Goto Github PK

#techtonic

Tools and templates to build JavaScript applications faster and better

##Getting Started  

• Download and install Node.js and Git
• Clone this repo locally (or just download the zip)

    git clone https://github.com/jhwohlgemuth/mvc-webapp.git

• Navigate to the root directory

    cd mvc-webapp

• Install the node modules needed for development

    npm install

• Write some code and run some Grunt tasks
• Enforce code standards
• Mock a RESTful API or a WebSocket Server Endpoint for development
• Connect to a local data service
• Fork this repo, write your application and

##Technologies

##Folder Structure +- api | |- db.json | - index.js +- app | +- models | +- views | +- controllers | +- modules | +- helpers | |- app.js | |- router.js | |- main.js | |- config.js | - index.html +- assets | +- fonts | +- images | +- library | +- templates | +- less | |- reset.less | - style.less +- config | |- .csslintrc | |- .jscsrc | |- .jscsrc-jsdoc | |- .jshintrc | |- default.js | - karma.conf.js +- tasks | - main.js +- tests | +- data | +- jasmine | +- specs | - test-main.js +- vault +- web | - server.js |- GruntFile.js |- package.json |- app.json |- server.js - Vagrantfile

##Grunt Tasks

• grunt lint
• grunt linting (watch task)
• grunt build (transpile LESS, pre-compile templates and optimize JS into one file)
• grunt test
• grunt testing (watch task)
• grunt cover
• grunt covering (watch task)
• grunt review (watch task)
• grunt quick-review (watch task) [default task]
• grunt inspect (detect copy-pasted and structurally similar code)
• grunt aria (lint HTML files for accessibility)
• grunt docs (generate documentation in ./docs folder)
• grunt plato (generate plato report in ./reports folder)
• Read tasks/main.js for all available tasks

##JSCS Rules (JSHint rules) 

• Disallow Dangling Underscores
• Disallow Empty Blocks
• Disallow Keywords: ("with")
• Disallow Keywords on New Line: ["else"]
• Disallow Mixed Spaces and Tabs
• Disallow Multiple Line Breaks
• Disallow Multiple Line Strings
• Disallow Multiple Variable Declarations
• Disallow Space After Object Keys
• Disallow Space After Prefix Unary Operators ("++", "--", "+", "-", "~", "!")
• Disallow Space Before Postfix Unary Operators: ("++", "--")
• Disallow Spaces in Anonymous Function Expressions
• Disallow Spaces in Function Expressions Before Opening Round Braces
• Disallow Spaces in Named Function Expressions Before Opening Round Braces
• Disallow Spaces Inside Array Brackets
• Disallow Spaces Inside Object Brackets
• Disallow Spaces Inside Parentheses
• Disallow Trailing Commas
• Disallow Trailing Whitespaces
• Disallow Yoda Conditions
• Maximum Line Length (150)
• Require Camel Case or Upper Case Identifiers
• Require Capitalized Constructors
• Require Commas Before Line Breaks
• Require Curly Braces ("else", "for", "while", "do", "try", "catch")
• Require Space After Keywords ("if", "else", "for", "while", "do", "switch", "return", "try", "catch")
• Require Space Before Binary Operators ("+", "-", "/", "*", "=", "==", "===", "!=", "!==")
• Require Space Before Block Statements
• Validate Indentation (4)
• Validate Line Breaks ("CRLF")
• Validate Quote Marks (Use single quotes)

##RESTful API Server

1. Open new command prompt in /api directory.
2. Type:

    json-server --watch db.json

😄 You now have a RESTful API for testing at localhost:3000. (see docs for more information)

##WebSocket Server Endpoint

1. Open new command prompt in root directory.
2. Type:

    node api/index

😄 You now have a WebSocket server for testing at localhost:13337. (see docs for more information)

#Data Services      

###Requirements

• Node.js is installed
• Virtualbox is installed
• Vagrant is installed
• vagrant hostmanager plugin is installed vagrant plugin install vagrant-hostmanager

###Using MongoDB

✓ Set inline to $install_mongo on line 27.

✓ Execute vagrant up

✓ Install Mongo for windows

✓ In a mongo console, execute mongo db.server

Tip: The default port for MongoDB is 27017. It can be changed by editing /etc/mongod.conf.

###Using redis

✓ Set inline to $install_redis on line 27.

✓ Execute vagrant up

✓ Install a redis client. I like Redis Commander.

Install Redis Commander with npm install redis-commander --global

✓ Start Redis Commander with redis-commander --redis-host db.server

✓ Open your favorite browser and navigate to localhost:8081

Tip The default port for redis is 6379. It can be changed by editing /etc/redis/redis.conf.

###Using CouchDB ✓ Set inline to $install_couch on line 27.

✓ Execute vagrant up

✓ Create a ssh tunnel on your host machine (input yes, then vagrant):

ssh -f -L localhost:5984:127.0.0.1:5984 [email protected] -N

✓ Open your favorite browser and navigate to localhost:5984/_utils

Tip: The default port for CouchDB is 5984. It can be changed by editing /etc/couchdb/local.ini

#Alternatives

• See wiki page, Tools for Creating Web Apps

#References & Resources

• See wiki page, References & Resources

#Future

• See mvc-webapp Trello board