can-boilerplate

Get a head start on your CanJS project.

can-boilerplate

Get a head start on your CanJS v2.x project.

How it can help you:

  • Get started quickly with customized Development and Production environment "shell" files
  • Avoid feeling overwhelmed with a folder structure that's simple and light but not hindering
  • Save time with compilers and optimizers that do not require the use of a command line

This plugin requires Node.js ~0.10. Temporarily, it also requires Xcode and a Unix-based OS.
To install, type this at the command line:

npm install can-boilerplate -g

After that, you can generate a project any time with:

canbp

That's it. ☺︎

  • 0.7.x speed up loading of tool dependencies somehow
  • 0.7.x add source map support to grunt-myth
  • 0.8 add DocumentJS (and YUIDoc?)
  • 0.9 possibly add hooks to Yeoman
  • 1.0 test on Windows
  • 1.1 possibly add StealJS

Run either the *.bat (Windows) or *.command (Mac) file in client/private/tools/ to install the build tools and all client-side dependencies. Optionally, you can manually run npm install within client/.

Run either the *.bat (Windows) or *.command (Mac) file in client/private/tools/. Optionally, you can manually run grunt compile within client/ to skip all menus and prompts.

├── client/
│   ├── node_modules/
│   ├── private/
│   │   ├── components/
│   │   │   └── example/
│   │   │       ├── helpers/
│   │   │       ├── media/
│   │   │       │   ├── backgrounds-embedded/
│   │   │       │   ├── chrome-embedded/
│   │   │       │   ├── icons-embedded/
│   │   │       │   └── textures-embedded/
│   │   │       ├── models/
│   │   │       ├── example.js
│   │   │       ├── example.less
│   │   │       └── example.mustache
│   │   ├── media/
│   │   │   ├── backgrounds/
│   │   │   ├── backgrounds-embedded/
│   │   │   ├── chrome/
│   │   │   ├── chrome-embedded/
│   │   │   ├── fonts/
│   │   │   ├── icons/
│   │   │   ├── icons-embedded/
│   │   │   ├── textures/
│   │   │   └── textures-embedded/
│   │   ├── models/
│   │   │   └── example/
│   │   │       └── example.js
│   │   ├── test/
│   │   │   ├── func.js
│   │   │   ├── test.html
│   │   │   └── unit.js
│   │   ├── vendors/
│   │   ├── index.html
│   │   ├── index.production.html
│   │   ├── init.js
│   │   └── init.less
│   ├── public/
│   ├── tools/
│   │   ├── tools.bat
│   │   └── tools.command
│   ├── bower.json
│   ├── Gruntfile.js
│   └── package.json
├── server/
└── README.md

client/public/ stores your compiled/minified production-ready files.
client/private/ stores your source code.

client/private/vendors/ (bower components) and client/node_modules/ are gitignore'd. They're only added when the project is installed.

client/private/media/*/ stores media referenced from your CSS. Folders included in production build.
client/private/media/*-embedded/ stores media compiled into the production CSS file (using Less' data-uri()). Folders excluded in production build.

Any empty folders will be excluded from the production build.
Any empty files in any media/ folder will be excluded from the production build.

  1. Why not just set the <script> and <link> references to relative?
    You could, but then the 404 routes to your index file would stop working.

  2. Why route 404s to the index file?
    Because can.route.pushstate can figure out where it is in relation to its root. CanJS can handle most of your application from within the browser alone.

  3. **Why gzip the .js and .css files upon compiling?
    You don't have to rely on your webserver to do it for you. Read up on serving pre-compressed files.

  4. What changes must I make when moving my production environment?

  5. Run the compiler and change the app root value.

  6. Move files from client/public/ to their destination.

  7. What changes must I make when moving my development environment?
    In client/private/index.html, update the <data> tag.

  8. How can I upgrade an existing project with a new version of the tools?

  9. Generate a temporary project in another directory.

  10. Make sure that you have not made any changes to the following in your project:

* client/Gruntfile.js
* client/package.json
* client/tools/
  1. Replace the above mentioned files with those from the temporary project.
  • 0.7.0 added Mocha, FuncUnit and Myth, removed 3L, restructured tools
  • 0.6.2 suggests only available ports to webserver
  • 0.6.1 added Travis CI support to projects, cleanup
  • 0.6.0 now an NPM package with a scaffolder, new folder structure again
  • 0.5.0 added Bower, new folder structure, merged tools
  • 0.4.5 tools cleanup, added support for JavaScript and Less source maps (buggy)
  • 0.4.4 tools and url-helpers cleanup
  • 0.4.3 appRoot cleanup and Zepto support
  • 0.4.2 gruntfiles cleanup
  • 0.4.1 moved appRoot to project package file
  • 0.4.0 added prompts to tools
  • 0.3.1 updated to grunt-include-replace v1.2
  • 0.3.0 simplified path changes, production HTML file now generated on compile
  • 0.2.1 updated to grunt-cleanempty v0.2
  • 0.2.0 included grunt-cleanempty v0.1
  • 0.1.0 initial "feedback" release