[PPHA-182] Build assets using rollup and sass

In production build assets as a Docker build stage

In development add a new docker compose service for watching assets
and building on the fly. Compiled assets are then synced back to the
host machine in order to present to the running django server

Author: Themitchell

.gitignore

@@ -14,3 +14,5 @@
 
 .env
 __pycache__
+lung_cancer_screening/assets/compiled/*
+!lung_cancer_screening/assets/compiled/.gitkeep

Dockerfile

@@ -1,3 +1,12 @@
+FROM node:24.4.1-alpine3.21 AS asset_builder
+
+WORKDIR /app
+
+COPY package.json package-lock.json rollup.config.js  ./
+COPY lung_cancer_screening ./lung_cancer_screening
+RUN npm ci
+RUN npm run compile
+
 FROM python:3.12-alpine3.19 AS builder
 
 ENV PYTHONDONTWRITEBYTECODE=1 \
@@ -40,6 +49,8 @@ WORKDIR /app
 
 COPY --chown=app:app . .
 
+COPY --from=asset_builder --chown=app:app /app/lung_cancer_screening/assets/compiled /app/lung_cancer_screening/assets/compiled
+
 USER app
 
 EXPOSE 8000

docker-compose.yml

@@ -13,6 +13,15 @@ services:
       - ./lung_cancer_screening:/app/lung_cancer_screening
     restart: unless-stopped
 
+  asset_builder:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: asset_builder
+    command: npm run watch
+    volumes:
+      - ./lung_cancer_screening/assets/compiled:/app/lung_cancer_screening/assets/compiled
+
   db:
     image: postgres:15-alpine
     env_file:

lung_cancer_screening/assets/compiled/.gitkeep

@@ -0,0 +1 @@
+import "nhsuk-frontend/packages/nhsuk.js";

lung_cancer_screening/assets/js/index.js

@@ -0,0 +1,2 @@
+// Import NHS.UK frontend library
+@import "nhsuk-frontend/packages/nhsuk";

lung_cancer_screening/assets/sass/main.scss

@@ -1,5 +1,12 @@
+{% set assetPath = STATIC_URL ~ "/assets" %}
+
 {% extends 'template.jinja' %}
 
+{% block head %}
+  <link rel="stylesheet" href="{{ static('css/main.css' )}}">
+  <script type="module" src="{{ static('js/bundle.js' )}}"></script>
+{% endblock %}
+
 {% block pageTitle %}Lung Cancer Screening - NHS{% endblock %}
 
 {% block content %}

lung_cancer_screening/core/jinja2/layout.jinja

@@ -1,5 +1,9 @@
+from django.conf import settings
+from django.templatetags.static import static
+from django.urls import reverse
 from jinja2 import ChoiceLoader, Environment, PackageLoader
 
+
 def environment(**options):
 
     env = Environment(**options, extensions=["jinja2.ext.do"])
@@ -19,4 +23,8 @@ def environment(**options):
             ]
         )
 
+    env.globals.update(
+        {"static": static, "url": reverse, "STATIC_URL": settings.STATIC_URL}
+    )
+
     return env

lung_cancer_screening/jinja2_env.py

@@ -139,6 +139,12 @@ def boolean_env(key, default=None):
 
 STATIC_URL = 'static/'
 
+STATIC_ROOT = BASE_DIR / "staticfiles"
+
+STATICFILES_DIRS = [
+    BASE_DIR / "lung_cancer_screening" / "assets" / "compiled"
+]
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field