Front-end boilerplate for locomotive js

Locomotive.js is an MVC framework for Node.js that allows you write node apps fast, without worrying about much boilerplate. It's a great project, and I use it frequently when working on side projects (in fact, it powers this website), however, it leaves the front-end up to you. Because I was tired of cloning the same front-end pieces from previous projects when starting a new project, I decided to put together some front-end boilerplate, as I figured others would be benefit as well.

To those less familiar with Locomotive.js, you could say Locomotive.js (which relies on express.js) is to Node.js as Ruby on Rails is to Ruby, that is, a framework that support MVC patterns, RESTful routes, and convention over configuration. Before the surge of Node.js, Ruby on Rails was my backend framework of choice, but as a front-end developer, when Node.js started to mature, I was more than happy to see a project that reminded me so much of Rails, but allowed me to code using my primary language.

You can view and fork the repo here. It embraces modern development tools including Webpack, ES6, React, and Redux. Below is an overview of the tools used.

Gulp, Webpack and ES6

Static assets are packaged together with Gulp and Webpack. Two javascript entry points are available, public_main for the public aspect of the website, and app_main for the "app" that is accessed by registering an account and logging in. Webpack enables you to write ES6 using Babel (note: for the front-end only, not the back-end node.js).


Locomotive.js, as with Express.js, comes preconfigured using EJS for templating, but let's be honest, EJS is ugly and clunky, Jade is so much better, so I'm using it here. Under the /app/views directory you will find a directory for layouts including a public_layout and an app_layout. Public pages (not requiring auth) are stored under app/views/pages, which corresponds with the pages controller, and partials (e.g. footer, header) is stored under app/views/partials.


CSS is written using Stylus. A directory structure has been started for your convenience including base and layout styles, a variables file to import.


We all need font icons. Font-awesome is included in the gulp build.

Login and Registration

This project includes a very simple login and registration using Bcrypt, Mongooose, and MongoDB.

Check it out.

Questions, comments, improvements?