Skip to content

README.md

Latest commit

 

History

History
71 lines (44 loc) · 2.58 KB

README.md

File metadata and controls

71 lines (44 loc) · 2.58 KB

KickPlate

A volo/grunt boilerplate project to get you started writing awesome JS apps in the browser.

What's included?

This project really wouldn't exist if it wasn't for these excellent products:

Libraries

  • jQuery - Loaded from Google's CDN; local failback coming soon.
  • Backbone
  • Backbone.Marionette - More structure for your Backbone apps.
  • LoDash - A drop in replacement for Underscore.
  • Handlebars
  • RequireJs - Honestly, the best thing that's happened to JS in the browser.
  • RequireJs Handlebars Plugin - This plugin is fantastic: it loads and pre-compiles your handlebars templates.

Tools

  • grunt
  • compass (through grunt)

Project setup

This web project has the following setup:

  • src/
    • scss/ - scss styles. compass will build these into src/www/css
    • www/ - the web assets for the project
      • index.html - the entry point into the app.
      • js/
        • app.main.js - the top-level config script used by index.html
        • app/ - the directory to store project-specific scripts.
        • vender/ - the directory to hold third party scripts.

How do I use this?

It should be super simple. Assumng you alredy have npm, just:

  1. npm install grunt -g
  2. npm install volo -g

Once that's done, you're ready to create your app. Again, in your command line:

  • volo create appName earaya/kickplate

Then enter your app's directory and:

  1. npm install
  2. grunt volo:install

This will pull all your dependencies.

At this point your app is ready. You can start writing code in the src/www folder.

The cool thing about this project is that you can work in and serve the www files without a compilation step. Your styless will need to be pre-processed, however, so grunt watch will take care of that.

How do I build my app when I'm done developing?

In your app folder, type:

grunt build

When the grunt task has finished, you can start serving build\www folder. You should compare the network traffic between the src/www and build/www folder to understand what the build is doing for you. Also, take a look at the content of the files. You'll see that your JS is uglified and minified.

Anything else I should know?

I've set this up to make sure you have a great experience. The project lints, and runs your tests on builds. Everything should be really easy to do. If it's not, please let me know. Or better yet, plase submit a pull request.

Also, there's a few more things I'd like to add, so keep your eyes open for changes!