Skip to main content

Dev Workflow

Frontend Infrastructure Diagram​

Notes:

  1. The frontend app compile and bundle frontend assets.
  2. After it finish building, the built assets are placed at STATIC directory.
  3. Django will treat the built assets as normal assets and do not care where they come from.
  4. Django will add the JS and CSS link to the template to make sure browser can download them.

When user visits the website:

  1. Web server process the request, render HTML using Django template.
  2. The browser download CSS, JS and other assets.
  3. The browser run Javascript to sprinkle the server-rendered HTML.

Frontend Project Structure​

The frontend project was created by python-webpack-boilerplate

├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── frontend
│   ├── README.md
│   ├── build
│   ├── src
│   │   ├── application
│   │   ├── components
│   │   ├── controllers
│   │   ├── helpers
│   │   └── styles
│   ├── vendors
│   └── webpack

Notes:

  1. frontedn/build directory contains all built static assets
  2. frontedn/src/application contains entry application file
  3. frontedn/src/controllers contains Stimulus controllers
  4. frontedn/src/helpers contains helper Javascript.
  5. frontedn/src/styles contains SCSS files.

npm run start VS npm run watch​

Both commands will compile frontend assets, npm run start will launch dev server which can auto refresh web page in some cases, while npm run watch does not support this feature.

  1. https://python-webpack-boilerplate.readthedocs.io/en/latest/frontend/
  2. https://python-webpack-boilerplate.readthedocs.io/en/latest/live_reload/

After you compile the frontend assets, the javascript_pack and stylesheet_pack will help import the bundle files in Django template.

You can check django_app/templates/base.html to learn more.

Install package​

If you want to install 3-party npm package, please use npm install command