Front End Development Guide

Front-End Dependencies & Bower

The decision was made to migrate front-end dependencies (JS, CSS, and LESS) to use the Bower package manager. It is a tool that is quite popular with front-end developers. My reasoning is:

• Makes updating of front-end deps' much easier
• Offers semantic versioning (semver) of front-end deps
• Will ultimately keep the Mailpile git repo smaller in size

Currently the plan is to keep comiting the default.css and various JS files so the experience for an alpha tester or backend python dev should remain identical to current flow. However, front-end developers will need to install Bower and the Mailpile deps if they want to work on existing front-end (mostly LESS / CSS) code.

Using Bower with Mailpile

To start doing front-end development on Mailpile you need to first install the existing dependencies, once you have Bower itself installed, do the following to:

• Navigate to theme folder $ cd Mailpile/shared-data/default-theme
• Install Bower dependencies $ bower install

This will have created the following folder Mailpile/shared-data/default-theme/bower_components which contains all the source front-end dependencies.

• To add a new dependency type $ bower install new-package-name
• To search packages type $ bower search name-of-package

Compiling LESS

First make sure that you have the Ruby version of lessc installed:

• Run which lessc to check if you have lessc installed.
  • If not, run make debian-dev (or arch-dev, or fedora-dev)
  • If yes check ls -al `which lessc`
    • If it points to a nodejs installation, run sudo gem install therubyracer less

To compile modifications in less files to css, run make less in the root folder. To compile changes automatically, run make less-loop. This will compile everything down in every 15 seconds.