This is a front-end boilerplate to aid in standing up a client-side application quickly. It's is intended to be platform agnostic and easy to extend for your needs. The only dependencies it has are node.js and npm. It utilizes gulp as well as webpack to compile and minify files and also includes bower for library package management.
What it includes
- SCSS compiling to CSS (using node sass so there is no ruby depency)
- JS module bundling (using webpack)
- Nunjucks static HTML compiling
- Library package management via bower
- Static webserver using Connect and LiveReload
- Image optimization
- Heroku configuration files and instructions for deploying static files to staging server with basic auth
How do I get set up?
- Install node.js and npm
npm installfrom the root of the directory
bower installto install any library dependencies (initially includes jQuery)
gulp buildto build the project files one time. The files are compiled from
Other gulp tasks and options available
gulp watchwill build the site and start watching files (.scss, .html, media files (any file in
/src/media), .js, or .json) for changes. Incremental builds will occur depending on the type of file that was updated (i.e. changes to .scss files will only rebuild the css).
gulp --prodwill rebuild the site and minify the CSS and JS (intended for production releases). The HTML templates will include the minified versions of the bundled CSS and JS files automatically.
gulp watch --servewill start up a static local webserver using Connect middleware and LiveReload.
Deployment to Heroku
- Sign up with a Heroku account
- Install the Heroku Toolbelt
- Update the username and password fields on line #3 to your liking
- If you don't have a git repo already run
git initto initialize a git repo
heroku createto add a new Heroku app
- Make sure that you're using the ruby buildpack by running the following command
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-ruby
- Add a second buildpack to allow node to build
heroku buildpacks:add --index 1 https://github.com/heroku/heroku-buildpack-nodejs
git add .and
git commit -m "you git message here"
git push heroku master
- When that's done deploying run
heroku opento view your site in the browser.