Adds front-end boilerplate to locomotive.js with Webkit, Gulp, and ES6
Switch branches/tags
Nothing to show
Clone or download
Latest commit bf29b24 Jan 24, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
app update focus Nov 29, 2015
config update login Nov 28, 2015
static update focus Nov 29, 2015
.gitignore fix gitignore Jan 24, 2016 Update Nov 29, 2015
gulpfile.js add fonts Nov 29, 2015
package.json update focus Nov 29, 2015
server.js first Nov 27, 2015
webpack.config.js update focus Nov 29, 2015


Front-end boilerplate for locomotive.js.

About and Overview

What you've got here is a front-end web-app starter kit built along side the Locomotive.js Express/Node framework.

To those less familiar with Locomotive.js, you could say Locomotive.js is to Node.js what Ruby on Rails is to Ruby, that is, a framework that support MVC patterns, RESTful routes, and convention over configuration.

Locomotive.js is a great project that allows you start writing node apps fast, without worrying about much boilerplate. However, it leaves the front-end up to you.

Therefore, I started this project with the same intention that Locomotive.js was for the backend, but for the the front-end.

It embraces modern development tools including Webpack, Gulp, and ES6.

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.


Locomotive.js, as with Express.js, comes preconfigured using EJS for templating, but 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. Normal public pages are stored under app/views/pages which corresponds with the pages controller, and partials (eg 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, and a component directory for your React components.


Font-awesome is included in the gulp build.

Login and Registration

Includes a simple login/registration using Mongooose, and MongoDB.