During my industrial year at Clock Limited I was exposed to a lot of new javascript technologies, however working on an existing code base means you can't always use the latest and greatest tools that you want to.

As a side project myself, Kenan, Ben and Matt decided to work on something a little bit different on friday afternoons to keep the noodles ticking over.

We came up with itsback.at, which sadly never got finished; but it did allow us to play with a whole host of new technologies that we hadn't had the chance to use before, including ES6.

From that I've extracted the core boilerplate and made a repository for future projects. You can find it all on Github.


Here are some of the core technologies utilised in this boilerplate.

Node 6.9.0 - Lets us use ES6 on the server side.

MongoDB 3.2 - NoSQL isn't for everyone but we find it works nicely with Node.

Webpack - Builds all of our code into production ready bundles.

SocketIO - Web sockets made easy.

Mongoose - Database controller.

Pug - HTML templating language.

Stylus - Minimal CSS.

ESlint - Modern linting that supports ES6.

Build scripts

npm test - check that the code passes linting, using Clock's eslint preset, run all the tests in the test folder, and produce a coverage report with istanbul.

npm run build - builds the project for production, it will trans-compile the stylus down to CSS, and the client side JS to ES5, and then minify it.

npm run watch - this does the same as the build, however it will not minify the clientside JS, but will set the project up to rebuild on any changes to JS or Jade files.

External services

The project is designed to be used with Travis CI, Codecov and Heroku. All you need to do to get it up and running is link your Github repository with these services, and set it to build on push.

This means that when you update your code and push it to Github, it will then build the application and run its tests in Travis CI. If it is successful it will upload the coverage statistics of the tests to Codecov, and then deploy the new build to Heroku for all to see.

I've even included some snazzy badges in the readme, you just need to change the repository links. Click a badge to see what the service looks like!

Build Status Coverage Dependencies Code Climate Known Vulnerabilities Stories in Backlog

Thanks, and alternatives

A lot of credit needs to go to the people at Clock as well as those co-workers mentioned above for developing this stack, so please go check them out. This isn't the most polished boilerplate, as it is rather bare bones and doesn't include an MVC framework so it might not be for you.

One alternative to check out is Mega Boilerplate, it allows you to select what technologies you want to use for each part of the stack and bundles it all up for you. My only gripe with it is the generated code isn't ES6 and is a bit oddly laid out.

If you want to ask me any questions feel free to email me, or comment on a reddit thread.