HomeSoftware Heritage

swh-web: Improve frontend development workflow

Description

swh-web: Improve frontend development workflow

This commit improves frontend development for swh web applications
by setting up a static assets pipeline using the module bundler tool
webpack. It enables to organize frontend development into logical
modules and then package those modules into multiple bundles that
will be loaded when required by client browsers.

This induces the following changes (see updated README):

  • node.js is now a requirement for developping swh-web
  • all static assets dependencies (javascript libraries, stylesheets, web fonts) are now managed and retrieved using npm.
  • all static assets will now be served through our web server

Regarding the webpack workflow put in place, it offers the following
features:

  • automatic linting of custom javascript and stylesheets in order to have a consistent code style and avoid bad pratices
  • the possibility to use es6 syntax and recent javascript features (like async/await) through the use of babel (es6 to es5 transpiler)
  • leverage the use of webpack-dev-server in development mode in order to automatically reload web applications in the browser when modifying source files
  • in production mode, minify javascript and stylesheets but also perform dead code elimination in order to reduce bundle sizes and thus optimize the amount of data to serve to the clients.

Closes T1006

Details

Provenance
anlambertAuthored on Apr 19 2018, 10:32 PM
anlambertPushed on Apr 20 2018, 2:59 PM
Parents
rDWAPPS51f6f360a10f: Add missing allowed hosts
Branches
Unknown
Tags
Unknown
Tasks
T1006: Web App: Improve frontend development workflow