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

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

Notes:

1. frontedn/src/application contains entry application file
2. frontedn/src/controllers contains Stimulus controllers
3. frontedn/src/helpers contains helper Javascript.
4. frontedn/src/styles contains SCSS files.

Install package

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