Auto reload when CSS/JS changes in development

Author: aequitas

.github/workflows/docker.yml

@@ -575,7 +575,7 @@ jobs:
 
       - name: Start development environment
         # disable autoreload in CI as it makes workers unstable
-        run: DEVSERVER_ARGS=--noreload make up env=develop
+        run: INTERNETNL_AUTORELOAD=False make up env=develop
 
       - name: Run development environment tests
         run: make develop-tests

docker/Dockerfile

@@ -219,6 +219,15 @@ ENV SETUPTOOLS_SCM_PRETEND_VERSION=$RELEASE
 ENTRYPOINT [ "python3", "./manage.py"]
 CMD ["runserver", "0.0.0.0:8080"]
 
+# app image with development tools for better live reloading
+FROM app AS app-dev
+
+# required for compose `develop` mode file sync/copy
+USER root
+
+# browser reload
+COPY --from=linttest-deps /usr/local/lib/python${PYTHON_VERSION}/dist-packages/django_browser_reload /usr/local/lib/python${PYTHON_VERSION}/dist-packages/django_browser_reload
+
 # supplement application with unittest, lint dependencies
 FROM build-app AS linttest
 ARG PYTHON_VERSION

docker/compose.development.yaml

@@ -20,9 +20,29 @@ services:
       - IPV4_IP_RABBITMQ_INTERNAL
 
   app:
+    build:
+      target: app-dev
+    develop:
+      watch:
+        # auto rebuild/reload when CSS/JS changes
+        - path: ../frontend/
+          action: sync+exec
+          target: /app/frontend
+          exec:
+            command: /bin/sh -c "python3 bin/frontend.py js;python3 bin/frontend.py css;"
     # use Django runserver for better debug abilities during development
-    entrypoint: ["/bin/sh"]
-    command: ["-c", "./manage.py runserver 0.0.0.0:8080 $DEVSERVER_ARGS"]
+    entrypoint: ["/bin/bash"]
+    # run CSS auto rebuild in the background and start devserver
+    command:
+      - "-c"
+      - >
+        if [ "$INTERNETNL_AUTORELOAD" = "True" ]; then
+          ./manage.py runserver 0.0.0.0:8080
+        else
+          ./manage.py runserver 0.0.0.0:8080 --noreload
+        fi;
+    environment:
+      - INTERNETNL_AUTORELOAD
     volumes:
       - batch_results:/app/batch_results
       # mount sources using volumes for quicker dev cycles

docker/defaults.env

@@ -278,8 +278,8 @@ LANGUAGES=en,nl
 # enable caching, set to off to disable
 NGINX_PROXY_CACHE=default_cache
 
-# used to disable autoreload in CI
-DEVSERVER_ARGS=
-
 # how long Django rendered pages are cached in Redis DB
 PAGE_CACHE_TIME_SECONDS=300
+
+# allows to disable autoreload in CI
+INTERNETNL_AUTORELOAD=False

docker/develop.env

@@ -77,3 +77,6 @@ PAGE_CACHE_TIME_SECONDS=0
 # Routinator is slow to start initially and requires a lot of resources which is not ideal for
 # development environments.
 COMPOSE_PROFILES=monitoring
+
+# automatically reload browser when html/css/js changes
+INTERNETNL_AUTORELOAD=True

docker/port-expose/nginx_templates/port-expose.conf.template

@@ -17,6 +17,14 @@ server {
         proxy_pass http://$IPV4_IP_WEBSERVER_INTERNAL/connection/;
     }
 
+    location /__reload__/events/ {
+        proxy_set_header Host ${INTERNETNL_DOMAINNAME};
+        proxy_ssl_name ${INTERNETNL_DOMAINNAME};
+        proxy_ssl_server_name on;
+        proxy_ssl_verify off;
+        proxy_pass https://$IPV4_IP_WEBSERVER_INTERNAL:443;
+        proxy_buffering off;
+    }
 }
 
 server {

docker/webserver/nginx_templates/app.conf.template

@@ -164,6 +164,22 @@ server {
         proxy_pass http://${IPV4_IP_APP_INTERNAL}:8080;
     }
 
+    # disable buffering on event stream for CSS development
+    location /__reload__/events/ {
+        # disable this location when not in development
+        set $debug "${DEBUG}";
+        if ($debug != "True"){
+            return 404;
+        }
+
+        # same as / above, but only with things required in development
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_pass http://${IPV4_IP_APP_INTERNAL}:8080;
+        # disable buffering for streaming response
+        proxy_buffering off;
+    }
+
     # security.txt file
     location /.well-known/ {
         # basic auth should not apply to this path

documentation/Docker-getting-started.md

@@ -58,7 +58,8 @@ There are 2 environment for development, the "development" and "integration test
 | Server              | Django runserver          | uWSGI                        | uWSGI                     |
 | Python source files | Mounted                   | from build image             | from build image          |
 | Website             | http://localhost:8080     | http://localhost:8081        | http://localhost:8081     |
-| Autoreload          | `.py` files               | No                           | No                        |
+| Autoreload          | `.py`, `css`, `js` and    | No                           | No                        |
+|                     | `html` files              |                              |                           |
 | Batch API enabled   | Yes                       | No                           | Yes                       |
 | Tests               | Yes                       | Yes                          | Yes                       |
 | Test command        | `make develop-tests`      | `make integration-tests`     | `make batch-tests`        |

internetnl/settings.py

@@ -117,6 +117,8 @@
 
 ENABLE_HOF = get_boolean_env("ENABLE_HOF", True)
 
+AUTORELOAD = get_boolean_env("INTERNETNL_AUTORELOAD", False)
+
 # -- End of manual configuration
 
 """
@@ -141,6 +143,8 @@
     "django_hosts",
     "django_statsd",
 ]
+if AUTORELOAD:
+    INSTALLED_APPS += ["django_browser_reload"]
 
 TEMPLATES = [
     {
@@ -173,6 +177,10 @@
     "django_hosts.middleware.HostsResponseMiddleware",
     "internetnl.custom_middlewares.ActivateTranslationMiddleware",
 ]
+if AUTORELOAD:
+    MIDDLEWARE += [
+        "django_browser_reload.middleware.BrowserReloadMiddleware",
+    ]
 
 ROOT_URLCONF = "internetnl.urls"
 ROOT_HOSTCONF = "internetnl.hosts"

internetnl/urls.py

@@ -1,8 +1,13 @@
 # Copyright: 2022, ECP, NLnet Labs and the Internet.nl contributors
 # SPDX-License-Identifier: Apache-2.0
 from django.urls import include, path
+from django.conf import settings
 
 urlpatterns = [
     path("", include("interface.urls")),
 ]
+
+if settings.AUTORELOAD:
+    urlpatterns += [path("__reload__/", include("django_browser_reload.urls"))]
+
 handler404 = "interface.views.page404"