Upgrade frontend build system to npm & webpack
This Merge request is Teklia's work on upgrading the frontend build system to use npm & webpack.
- There are no vendored libraries anymore (except
color-thief
due to an upgrade we need to discuss) - django-compressor is removed in favor of django-webpack-loader
- Four chunks (Js & CSS) are generated by the new system:
-
vendor
has all the 3rd parties libraries -
main
contains all the Vanilla JS source code used on most pages -
baseline_editor
contains the Vanilla used on/baseline-editor/
-
editor
contains the Vue.js application code
-
- the
app/Dockerfile
now builds the frontend in anodejs
image, then the existing python based image use the resulting build - as we use webpack, we need to explicitly
export
the functions or classes used by top-level javascript (from the Django templates). This allow developers to explicitly set boundaries between HTML & JS code - Two CI tasks were added:
- build the frontend, using production setting
- build the docker image
- as little JS code as possible was modified:
- adding
export
where needed - replacing the
document.onload
calls by function encapsulation (prefixed byboot
) to control clearly each temlate's initialization
- adding
- of course we tested as much as possible with our current knowledge of the application.
To build the frontend:
cd front
npm install # run once
npm run build
You can also test with a simple docker-compose up --build