A fully-featured boilerplate for service-oriented single-page applications. I couldn't find an easy way to configure proxies for Yeoman or Brunch projects, which really hampered my ability to develop service-oriented applications… so I cooked this up. By no means is it authoritative or comprehensive, but it includes a lot of the components I usually spend a fair amount of time tweaking and configuring whenever I spin up a new project.
- jQuery, of course.
- Knockout for declarative-binding MVVM magic.
- Director for lightweight, yet flexible, routing.
- Bootstrap for responsiveness and widgets.
- Modernizr for feature detection.
- Platform.js for platform detection.
- HTML5 Boilerplate (jade-ified) because of best practices and stuff.
- RequireJS for AMD goodness.
- Font Awesome because everyone loves icon fonts.
- CoffeeScript because vanilla JavaScript is so 1994.
- LESS because I don't feel like dealing with Ruby dependencies to compile CSS.
- Jade keeps the HTML nice and tidy.
- Autoprefixer because nuts to remembering vendor prefixes.
- Grunt for super-flexible task running.
- Bower and NPM because manually managing dependencies is for suckers.
- Node.js (with Express and Restler) for development server and proxy functionality.
There are some other things going on behind the scenes; poke around to find out what's doing what.
The following commands check out the repo to myProject, installs dependencies, performs the initial build, and start the server:
$ git clone https://github.com/jszpila/BoilerPlus myProject && cd myProject
$ sudo npm install -g coffee grunt-cli bower grunt-devtools
$ npm install
$ bower install
$ grunt
$ node app.js
Open up a browser and go to localhost:2000 and you should see some stuff. Hooray!
NOTE:
If you're developing on Windows, you'll probably need to run the above commands using Git Bash.
The only things that need to be changed are the route and URL for proxying requests. Of course, feel free to modify or add routes as you see fit.
Some common commands:
node app.js # starts the development server
grunt watch # builds project & reloads browser* on file save
grunt copy-libs # copies files from bower_components to vendor
grunt clean-dev # deletes files in app/
* assuming Live Reload is properly configured and working.
BoilerPlus/ // Execute your commands here 'n stuff
dist/ // Production-ready files; structure mimics app/
public/ // Web root; compile target for index.jade
css/ // LESS compilation target
fonts/ // Fonts live here, if you need them
img/ // Images live here
js/ // CoffeeScript compilation target
partials/ // Jade compilation target for non-index files
vendor/ // Contains third-party assets
js/
css/
fonts/
src/ // Raw source files
coffee/ // Compiles to app/js
models/ // Models go here
viewmodels/ // Here there be view models
app.coffee // Main app logic
require-config.coffee // Require bootstrap config
routes.coffee // App router config
img/ // Pretty pictures go here
app/ // I don't like having site/app icons at root
apple-touch-*-.png // H5BP placeholder images for iOS devices
favicon.ico // H5BP placeholder favicon
jade/ // Compiles to app/
partials/ // Compiles to app/partials
index.jade // App's primary markup file
meta/ // Info about your app
humans.txt // ♫ Getting to know all about you… ♫
robots.txt // You tell them robots
less/ // Compiles to app/css
main/ // LESS files that compile to their own CSS files
locale/ // Locale-specific styles
app.less // Main stylesheet
partials/ // LESS files included by other files
test/ // Tests live here
e2e/ // End-to-end tests
unit/ // Unit tests
bower.json // Bower package info
Gruntfile.coffee // Grunt configuration
package.json // NPM package info
app.js // Node server app
- Package Control not required but highly recommended
- Sublime Grunt
- LESS Syntax Mode
- CoffeeScript Syntax Mode
- Jade Syntax Mode TextMate bundle; requires manual installation