build assets in web container

Dockerfile

@@ -1,9 +1,3 @@
-FROM node:jod-alpine as build
-
-COPY package*.json ./
-
-RUN npm install
-
 FROM python:3.13-slim
 
 RUN useradd appuser
@@ -17,6 +11,7 @@ ENV FLASK_APP=govuk-frontend-flask.py \
 
 COPY app app
 COPY govuk-frontend-flask.py config.py requirements.txt ./
+
 RUN pip install -r requirements.txt \
     && chown -R appuser:appuser ./
 

README.md

@@ -82,11 +82,11 @@ flowchart TB
     web1 -- Write --> web2
     web1 <-- redis:6379 --> cache1
 
-    subgraph Proxy container
+    subgraph Web container
         prox1
     end
 
-    subgraph Web container
+    subgraph App container
         web1
         web2
     end

app/__init__.py

@@ -26,7 +26,7 @@ def create_app(config_class: Type[Config] = Config) -> Flask:
     Returns:
         A configured Flask application instance.
     """
-    app: Flask = Flask(__name__, static_url_path="/assets")  # type: ignore[assignment]
+    app: Flask = Flask(__name__)  # type: ignore[assignment]
     app.config.from_object(config_class)
     app.jinja_env.lstrip_blocks = True
     app.jinja_env.trim_blocks = True
@@ -53,14 +53,6 @@ def create_app(config_class: Type[Config] = Config) -> Flask:
     limiter.init_app(app)
     WTFormsHelpers(app)
 
-    # Register asset bundles for CSS and JavaScript.
-    css: Bundle = Bundle("src/css/*.css", filters="cssmin", output="dist/css/custom-%(version)s.min.css")
-    js: Bundle = Bundle("src/js/*.js", filters="jsmin", output="dist/js/custom-%(version)s.min.js")
-    if "css" not in assets:
-        assets.register("css", css)
-    if "js" not in assets:
-        assets.register("js", js)
-
     # Register blueprints. These define different sections of the application.
     from app.demos import bp as demo_bp
     from app.main import bp as main_bp

app/templates/base.html

@@ -6,16 +6,15 @@
 {%- from 'govuk_frontend_jinja/components/phase-banner/macro.html' import govukPhaseBanner -%}
 {%- from 'govuk_frontend_jinja/components/service-navigation/macro.html' import govukServiceNavigation -%}
 
-{% set assetPath = url_for('static', filename='').rstrip('/') %}
+{% set assetPath = "/static/assets" %}
 
 {% block pageTitle %}{{config['SERVICE_NAME']}} – GOV.UK{% endblock %}
 
 {% block head %}
   <meta name="description" content="{{config['SERVICE_NAME']}}">
   <meta name="keywords" content="GOV.UK, govuk, gov, government, uk, frontend, ui, user interface, jinja, python, flask, port, template, templating, macro, component, design system, html, forms, wtf, wtforms, widget, widgets, demo, example">
   <meta name="author" content="{{config['DEPARTMENT_NAME']}}">
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend-5.8.0.min.css') }}" />
-  {% assets "css" %}<link href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}
+  <link rel="stylesheet" type="text/css" href="/static/govuk-frontend.min.css" />
 {% endblock %}
 
 {% block bodyStart %}
@@ -169,10 +168,9 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="{{ url_for('static', filename='govuk-frontend-5.8.0.min.js') }}"></script>
+  <script type="module" src="/static/govuk-frontend.min.js"></script>
   <script type="module">
-    import { initAll } from "{{ url_for('static', filename='govuk-frontend-5.8.0.min.js') }}"
+    import { initAll } from "/static/govuk-frontend.min.js"
     initAll()
   </script>
-  {% assets "js" %}<script type="text/javascript" src="{{ ASSET_URL }}"></script>{% endassets %}
 {% endblock %}

compose.yml

@@ -1,5 +1,5 @@
 services:
-  web:
+  app:
     build: .
     command: gunicorn --bind 0.0.0.0:5000 -w 4 --access-logfile - --error-logfile - govuk-frontend-flask:app
     restart: always
@@ -8,29 +8,23 @@ services:
       - CONTACT_PHONE=[contact phone]
       - DEPARTMENT_NAME=[name of department]
       - DEPARTMENT_URL=[url of department]
-      - REDIS_URL=redis://redis:6379
+      - REDIS_URL=redis://cache:6379
       - SECRET_KEY=4f378500459bb58fecf903ea3c113069f11f150b33388f56fc89f7edce0e6a84
       - SERVICE_NAME=[name of service]
       - SERVICE_PHASE=[phase]
       - SERVICE_URL=[url of service]
-    volumes:
-      - static_volume:/home/appuser/app/static:rw
     expose:
       - 5000
     depends_on:
-      - redis
-  redis:
+      - cache
+  cache:
     image: redis:7-alpine
     restart: always
     expose:
       - 6379
-  nginx:
-    build: ./nginx
-    volumes:
-      - static_volume:/home/appuser/app/static:ro
+  web:
+    build: ./web
     ports:
       - 443:443
     depends_on:
-      - web
-volumes:
-  static_volume:
+      - app

requirements.in

@@ -1,10 +1,7 @@
-cssmin
 email_validator
 flask
-flask-assets
 flask-limiter[redis]
 govuk-frontend-jinja
 govuk-frontend-wtf
 gunicorn
-jsmin
 pyyaml

requirements.txt

@@ -8,8 +8,6 @@ blinker==1.9.0
     # via flask
 click==8.1.8
     # via flask
-cssmin==0.2.0
-    # via -r requirements.in
 deepmerge==2.0
     # via govuk-frontend-wtf
 deprecated==1.2.18
@@ -21,12 +19,9 @@ email-validator==2.2.0
 flask==3.1.0
     # via
     #   -r requirements.in
-    #   flask-assets
     #   flask-limiter
     #   flask-wtf
     #   govuk-frontend-wtf
-flask-assets==2.1.0
-    # via -r requirements.in
 flask-limiter[redis]==3.10.1
     # via -r requirements.in
 flask-wtf==1.2.2
@@ -50,8 +45,6 @@ jinja2==3.1.5
     #   flask
     #   govuk-frontend-jinja
     #   govuk-frontend-wtf
-jsmin==3.0.1
-    # via -r requirements.in
 limits[redis]==4.0.1
     # via flask-limiter
 markdown-it-py==3.0.0
@@ -81,8 +74,6 @@ typing-extensions==4.12.2
     # via
     #   flask-limiter
     #   limits
-webassets==2.0
-    # via flask-assets
 werkzeug==3.1.3
     # via flask
 wrapt==1.17.2

web/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:jod-alpine AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+FROM nginx:stable-alpine
+
+RUN apk update && apk add --no-cache openssl && \
+    mkdir /etc/nginx/ssl && \
+    openssl req -x509 -noenc -newkey rsa:2048 -keyout /etc/nginx/ssl/key.pem -out /etc/nginx/ssl/req.pem -days 90 -subj "/C=GB/ST=Devon/L=Plymouth/O=HM Land Registry/OU=Digital/CN=localhost"
+
+COPY nginx.conf /etc/nginx/conf.d
+COPY --from=builder /app/node_modules/govuk-frontend/dist/govuk/assets /app/static/assets/
+COPY --from=builder /app/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.* /app/static
+
+RUN ls -la /app/static && sleep 10
+RUN ls -la /app/static/assets && sleep 10
+RUN ls -la /app/static/assets/fonts && sleep 10
+RUN ls -la /app/static/assets/images && sleep 10

nginx/nginx.conf → web/nginx.conf

@@ -25,7 +25,7 @@ server {
     ssl_prefer_server_ciphers off;
 
     # security headers
-    add_header Content-Security-Policy "script-src 'self' 'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw=' 'sha256-FYQEfJDRJxZS2mI1GIIwNGf5iK3oMnUEZORkvij4qy4='; object-src 'none'; base-uri 'none'; frame-ancestors 'none';" always;
+    add_header Content-Security-Policy "script-src 'self' 'sha256-onZv4s6+FTyEDj2PcCk7FhKyrLXnkggDKgX6qRaij18=' 'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw='; object-src 'none'; base-uri 'none'; frame-ancestors 'none';" always;
     add_header Cross-Origin-Embedder-Policy "require-corp" always;
     add_header Cross-Origin-Opener-Policy "same-origin" always;
     add_header Cross-Origin-Resource-Policy "same-origin" always;
@@ -42,17 +42,17 @@ server {
 
     location / {
         # forward application requests to the gunicorn server
-        proxy_pass http://web:5000;
+        proxy_pass http://app:5000;
         proxy_redirect off;
         proxy_set_header Host $host;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
         proxy_set_header X-Real-IP $remote_addr;
     }
 
-    location /assets/ {
-        # serve static files directly, without forwarding to the application
-        alias /home/appuser/app/static/;
+    location /static/ {
+        # serve static files directly
+        alias /app/static/;
 
         sendfile on;
         tcp_nopush on;