Mentions légales du service

Skip to content

Upgrade frontend build system to npm & webpack

Bastien Abadie requested to merge teklia-front-build-system into develop

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:
    1. vendor has all the 3rd parties libraries
    2. main contains all the Vanilla JS source code used on most pages
    3. baseline_editor contains the Vanilla used on /baseline-editor/
    4. editor contains the Vue.js application code
  • the app/Dockerfile now builds the frontend in a nodejs 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:
    1. build the frontend, using production setting
    2. 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 by boot) to control clearly each temlate's initialization
  • 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

Edited by Bastien Abadie

Merge request reports