Frontend

Frontend base dependencies

  • Node: >=18.14.0

  • Npm: >=10.0.0

  • Bootstrap: 5.3.6

  • Webpack: ^5.91.0

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.3) is fully working with Dartsass engine, it did not have migrated yet to the last language changes and so raise some warnings from compiler. Commandline script to build CSS has temporarily muted these warnings until next Bootstrap version.

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 than favicon is configured using a site manifest to cover multiple devices behaviors, you may build a new full site manifest from online tool like Favicon Generator (recommended).