Frontend

Frontend base dependencies

  • Node: >=18.0.0

  • Npm: >=8.0.0

  • Bootstrap: 5.2.0

  • Webpack: ^5.50.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 from Sass sources are not managed from Webpack since there is currently no Sass compiler that are properly usable. So these CSS files are just loaded as simple static files.

Webdesign integration

Layout stylesheets (CSS) are built from Sass 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.

The build from Sass to CSS is performed from the frontend stack with node-sass. We still use node-sass because it’s still the fastest compiler in Javascript.

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

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).