Frontend Automation

Agent leverages multiple automation tools to make development easier and faster. This document will give an overview of the tools we use and how to use them.

npm

npm is the javascript package manager for NodeJS. It is inlcuded when you install NodeJS on your computer. We use this tool to install dependencies that our app relies on to run properly. These dependencies are listed in the package.json file.

Optionally, yarn can be used a drop-in replacement for npm.

Using npm

Agent makes using npm very straight-forward. Since we already have our dependencies listed in the package.json file, all that's needed is running the command npm install, or npm i for short. That will retrieve all the code that Agent from npm's servers. To learn more about npm, please visit the npm docs.

Agent npm Tasks

To aid in quick development, many common tasks have been wrapped up into npm tasks that can be run in the command line. To view the full list of commands, see the scripts object in package.json. Some helpful commands to get started are:

npm run dev - Copies assets to the necessary location, compiles LESS files, and compiles javascript. Use this script to get the front end of the app ready to run.

npm run webpack - Compiles the javascript only. Use this script when you have made a change to the javascript or templates to recompile the bundle. A helper to this is npm run webpack -- --watch. This will put webpack in "watch" mode. It will monitor the dependent files and recompile automatically when one changes.

npm test - This runs the suite of front-end tests, including eslint and mocha unit tests.

Gulp

Gulp is a javascript task automation tool. It allows us to define custom tasks and run them concurrently. These tasks can include copying asset files to a dist directory, compiling our LESS files into css, and others. Gulp is automatically run with rake and can also be run via npm run dev or npm run release.

To use gulp from the command line directly, which is recommended for development, you need to run npm i -g gulp.

Using Gulp

Agent has built-in gulp tasks that aid in development. If another task is needed, gulp's website is a great place to start.

Agent Gulp Tasks

It is recommended that you use the npm tasks for most development needs. These tasks should only be used for certain, specific situations.

• gulp - Copies files to the dist directory and compile the LESS stylesheets
• gulp less - Compiles the LESS stylesheets content to the correct directory
• gulp less-watch - Runs a watch task that waits for a LESS file to change and then recompiles the styles. less-watch includes support for livereload. If you have a livereload plugin installed in your browser, it can automatically refresh the page to fetch the newest assets when your styles change. NOTE: You cannont run npm run webpack -- --watch and gulp less-watch at the same time as they both use the same port to communicate with livereload.
• gulp test - Runs eslint and front-end unit tests

To view other, more granular tasks, see the gulp/tasks files.

Next: Styling