Aristotle Static Files

Webpack

Aristotle uses webpack to bundle most static files served on the site. We also use webpack to compile .less stylesheets and to compile es6 javascript into backwards compatible versions using babel. More information about weback can be found here: https://webpack.js.org/

Arisotle Webpack Structure

The webpack project lives under /assets in the mono-repo. All pages with different js or css should have their own webpack entrypoint. All files in /src/pages are treated as entrypoints. /src/lib is for custom js that is used across entrypoints. /src/styles is where all the .css and .less stylesheets are found and src/components are where single file vue components are found

During Development

When making changes to aristotle we recommend using docker-compose to run your development version. This will automatically run the webpack build for you whenever a file is updated. The contianer will need to be restarted when adding a new page or changing the webpack config. This can be done with the docker-compose restart webpack command

Note that slightly different webpack configuration is used in development. The common, dev and prod configs can be found in /assets

If you wish to see what is in each of the generated bundles you can view the report generated with each build. This can be found at /assets/dist/report.html and gives a graphical represantaion of the bundles

Installing Dependancies

We use npm for dependancy management. You can run npm install from the assets directory to install all dependancies. This is not neccessary when using docker-compose

Running Builds

If you want to run a production build you can run npm run build. For a continuously updating development build you can run npm run watch

Bundle Loading

Bundles are loaded into the django template using django-webpack-loader. This provides some simple template tags to load the bundles. The css and js bundles should be loaded in the webpack_bundle and webpack_css_bundle blocks defined in base.html. See sandbox.html for an example

Testing

Front end tests are written using the mocha framework and chai assertion library and can be found in /assets/test. The tests are also processed with webpack before being executed by the karma test runner.

You can run the tests with npm run test. They are also executed by travis on each pull request

Linting (Style Checking)

Our package.json file contains some eslint configuration for style checking. Eslint can be run with npm run lint