Frontend

Frontend base dependencies

  • Node: >=22.0.0

  • Npm: >=10.0.0

  • Bootstrap: 5.3.8

  • Webpack: ^5.91.0

Concepts and features

Asset management

Frontend assets are managed with Webpack and Django is aware of them through django-webpack-loader so you can load them from templates.

Compiled CSS files (from Sass sources) are not managed from Webpack because it is too slow during its JavaScript build phase and would slow down the CSS build.

So these CSS files are just loaded as simple static files without the Django Webpack layer.

CSS are built from Sass

Layout stylesheets (CSS) are built from Sass language sources.

It is not allowed to use inline styles in templates and no scoped style from Javascript interfaces. The only source of truth for layout stylesheets are the Sass sources.

We are using Sass compiler sass-embedded that is an Npm package which embed the Dart binary instead of legacy sass package that just ship a pure JavaScript implementation. This is because the pure JavaScript implementation is largely slower that the Dart binary.

Note

Previously we used node-sass that was developed with the “Libsass” engine that is unmaintained and not uptodate with the last Sass language features.

So we have moved to the “Dartsass” engine that is the new legacy.

Webdesign integration

Default project frontend use Bootstrap framework and all templates are made with its components.

Note

Although the current last version of Bootstrap (v5.3.x) is fully working with Dartsass engine, it has not been migrated yet to the last Sass specifications and so it raises some warnings from compiler. Commandline script to build CSS has temporarily muted these warnings until next major Bootstrap version.

Webdesign styleguide

Default webdesign integration includes a styleguide automatically built from the Bootstrap settings.

The concept is to use the settings variables to describe the webdesign. This implies that you use the settings to customize the layout around Bootstrap and if you need additional variables for the site layout, you will have to add them to the manifest builder which is a Sass stylesheet.

The Sass stylesheet is included in the Sass sources so it is build aside your stylesheets in Sass sources.

The styleguide document is published from the module Styleguide.

Javascript interface

Default Javascript sources shipped in a project are basic and just load the Bootstrap components. Code sources are to be done for ES6 and jQuery is still available.

Logo and favicon

A project is generated with a default logo and favicon that you should change to fit to your project brand design.

Note that the favicon is built using a site manifest to cover multiple devices behaviors, you may build a new full site manifest from an online tool like Favicon Generator (recommended).

Stack information

Backend Utilities includes a view to display all package versions from frontend. During local development this is commonly build “on demand” but deployed environment (like in production) you may prefer to avoid this.

For this case, we include a script frontend/generate-stack-info.js that you can run during your deployment to build a cache file to read instead of building information “on demand”.

This script is simple so it does not requires any argument or configuration, just run it with Node.js (from the frontend directory):

node generate-stack-info.js

And it will write information into a file parts/node/node_stack.json (relatively to the project root).