Development environment for frontend developers at Fairfax Media.
Sets up a development environment for frontend developers that can't access the source code. Recently, at the last couple of places that I've been working, it's been somewhat impossible to access the source code of the working project, and therefore, I've been downloading the source via the web, working on it and then posting it back to backend developers to insert in to the project. This is somewhat annoying, so I've developed Frontfax.
[sudo] npm i -g frontfax(TODO: It hasn't been released to NPM yet.
frontfax project:new myproject
cd myproject && npm i
- myproject - assets - css - images - js - less - static
This is the process in which frontfax handles each HTTP request:
The images, js, css URLs are can configured, but these files will always be accessed from you assets directory.
static directory is the last place the server looks before proxying the request. This is good for HTML files. You do not need to configure the URL for this as it will consider the root to be accessible from the static directory.
To change the URLs open the
config/default.json file and edit the
While you're working on any less files they will automatically be converted in to css and placed in the css directory.
The advantages are of writing you CSS as LESS are:
When writing your less files, it is recommended to have one "main" file that includes all the requirements. This means that only one file needs to be uploaded to the production server after development.
Here's an example. Try to split your work in to many easy to read files.
/* assets/header.less */.header.nav/* nav styles */.logo/* logo styles */
/* assets/article.less */.article.picture/* picture styles */.teaser/* teaser styles */
/* assets/main.less */'header';'article';
Now you can point to one CSS file (
/my/configured/css/path/main.css) and have all your CSS returned:
/* build/main.css */
While you're working on any js files they will automatically be combined into assets/js/main.js.
Report all bugs in the Bitucket issue list.