Skip to content

Commit 0e346fd

Browse files
aequitasaequitas
committed
Auto reload when CSS/JS changes in development
1 parent d60d670 commit 0e346fd

File tree

12 files changed

+134
-46
lines changed

12 files changed

+134
-46
lines changed

‎.github/workflows/docker.yml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ jobs:
267267
sudo apt-get update
268268
269269
# upgrade Docker
270-
sudo apt install --upgrade docker-ce docker-compose-plugin=2.27.0\*
270+
sudo apt install --upgrade docker-ce docker-compose-plugin=2.33.1\*
271271
272272
- name: Debug info
273273
run: |
@@ -440,7 +440,7 @@ jobs:
440440
sudo apt-get update
441441
442442
# upgrade Docker
443-
sudo apt install --upgrade docker-ce docker-compose-plugin=2.27.0\*
443+
sudo apt install --upgrade docker-ce docker-compose-plugin=2.33.1\*
444444
445445
- name: Debug info
446446
run: |
@@ -523,7 +523,7 @@ jobs:
523523
sudo apt-get update
524524
525525
# upgrade Docker
526-
sudo apt install --upgrade docker-ce docker-compose-plugin=2.27.0\*
526+
sudo apt install --upgrade docker-ce docker-compose-plugin=2.33.1\*
527527
528528
- name: Debug info
529529
run: |
@@ -575,7 +575,7 @@ jobs:
575575

576576
- name: Start development environment
577577
# disable autoreload in CI as it makes workers unstable
578-
run: DEVSERVER_ARGS=--noreload make up env=develop
578+
run: INTERNETNL_AUTORELOAD=False make up env=develop
579579

580580
- name: Run development environment tests
581581
run: make develop-tests
@@ -637,7 +637,7 @@ jobs:
637637
sudo apt-get update
638638
639639
# upgrade Docker
640-
sudo apt install --upgrade docker-ce docker-compose-plugin=2.27.0\*
640+
sudo apt install --upgrade docker-ce docker-compose-plugin=2.33.1\*
641641
642642
- name: Debug info
643643
run: |

‎docker/Dockerfile‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,15 @@ ENV SETUPTOOLS_SCM_PRETEND_VERSION=$RELEASE
219219
ENTRYPOINT [ "python3", "./manage.py"]
220220
CMD ["runserver", "0.0.0.0:8080"]
221221

222+
# app image with development tools for better live reloading
223+
FROM app AS app-dev
224+
225+
# required for compose `develop` mode file sync/copy
226+
USER root
227+
228+
# browser reload
229+
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
230+
222231
# supplement application with unittest, lint dependencies
223232
FROM build-app AS linttest
224233
ARG PYTHON_VERSION

‎docker/compose.development.yaml‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,29 @@ services:
2020
- IPV4_IP_RABBITMQ_INTERNAL
2121

2222
app:
23+
build:
24+
target: app-dev
25+
develop:
26+
watch:
27+
# auto rebuild/reload when CSS/JS changes
28+
- path: ../frontend/
29+
action: sync+exec
30+
target: /app/frontend
31+
exec:
32+
command: /bin/sh -c "python3 bin/frontend.py js;python3 bin/frontend.py css;"
2333
# use Django runserver for better debug abilities during development
24-
entrypoint: ["/bin/sh"]
25-
command: ["-c", "./manage.py runserver 0.0.0.0:8080 $DEVSERVER_ARGS"]
34+
entrypoint: ["/bin/bash"]
35+
# run CSS auto rebuild in the background and start devserver
36+
command:
37+
- "-c"
38+
- >
39+
if [ "$INTERNETNL_AUTORELOAD" = "True" ]; then
40+
./manage.py runserver 0.0.0.0:8080
41+
else
42+
./manage.py runserver 0.0.0.0:8080 --noreload
43+
fi;
44+
environment:
45+
- INTERNETNL_AUTORELOAD
2646
volumes:
2747
- batch_results:/app/batch_results
2848
# mount sources using volumes for quicker dev cycles

‎docker/defaults.env‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -278,8 +278,8 @@ LANGUAGES=en,nl
278278
# enable caching, set to off to disable
279279
NGINX_PROXY_CACHE=default_cache
280280

281-
# used to disable autoreload in CI
282-
DEVSERVER_ARGS=
283-
284281
# how long Django rendered pages are cached in Redis DB
285282
PAGE_CACHE_TIME_SECONDS=300
283+
284+
# allows to disable autoreload in CI
285+
INTERNETNL_AUTORELOAD=False

‎docker/develop.env‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,3 +77,6 @@ PAGE_CACHE_TIME_SECONDS=0
7777
# Routinator is slow to start initially and requires a lot of resources which is not ideal for
7878
# development environments.
7979
COMPOSE_PROFILES=monitoring
80+
81+
# automatically reload browser when html/css/js changes
82+
INTERNETNL_AUTORELOAD=True

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@ server {
1717
proxy_pass http://$IPV4_IP_WEBSERVER_INTERNAL/connection/;
1818
}
1919

20+
location /__reload__/events/ {
21+
proxy_set_header Host ${INTERNETNL_DOMAINNAME};
22+
proxy_ssl_name ${INTERNETNL_DOMAINNAME};
23+
proxy_ssl_server_name on;
24+
proxy_ssl_verify off;
25+
proxy_pass https://$IPV4_IP_WEBSERVER_INTERNAL:443;
26+
proxy_buffering off;
27+
}
2028
}
2129

2230
server {

‎docker/webserver/nginx_templates/app.conf.template‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,22 @@ server {
164164
proxy_pass http://${IPV4_IP_APP_INTERNAL}:8080;
165165
}
166166

167+
# disable buffering on event stream for CSS development
168+
location /__reload__/events/ {
169+
# disable this location when not in development
170+
set $debug "${DEBUG}";
171+
if ($debug != "True"){
172+
return 404;
173+
}
174+
175+
# same as / above, but only with things required in development
176+
proxy_set_header Host $host;
177+
proxy_set_header X-Forwarded-Proto $scheme;
178+
proxy_pass http://${IPV4_IP_APP_INTERNAL}:8080;
179+
# disable buffering for streaming response
180+
proxy_buffering off;
181+
}
182+
167183
# security.txt file
168184
location /.well-known/ {
169185
# basic auth should not apply to this path

‎documentation/Docker-getting-started.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ There are 2 environment for development, the "development" and "integration test
5858
| Server | Django runserver | uWSGI | uWSGI |
5959
| Python source files | Mounted | from build image | from build image |
6060
| Website | http://localhost:8080 | http://localhost:8081 | http://localhost:8081 |
61-
| Autoreload | `.py` files | No | No |
61+
| Autoreload | `.py`, `css`, `js` and | No | No |
62+
| | `html` files | | |
6263
| Batch API enabled | Yes | No | Yes |
6364
| Tests | Yes | Yes | Yes |
6465
| Test command | `make develop-tests` | `make integration-tests` | `make batch-tests` |

‎internetnl/settings.py‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,8 @@
117117

118118
ENABLE_HOF = get_boolean_env("ENABLE_HOF", True)
119119

120+
AUTORELOAD = get_boolean_env("INTERNETNL_AUTORELOAD", False)
121+
120122
# -- End of manual configuration
121123

122124
"""
@@ -141,6 +143,8 @@
141143
"django_hosts",
142144
"django_statsd",
143145
]
146+
if AUTORELOAD:
147+
INSTALLED_APPS += ["django_browser_reload"]
144148

145149
TEMPLATES = [
146150
{
@@ -173,6 +177,10 @@
173177
"django_hosts.middleware.HostsResponseMiddleware",
174178
"internetnl.custom_middlewares.ActivateTranslationMiddleware",
175179
]
180+
if AUTORELOAD:
181+
MIDDLEWARE += [
182+
"django_browser_reload.middleware.BrowserReloadMiddleware",
183+
]
176184

177185
ROOT_URLCONF = "internetnl.urls"
178186
ROOT_HOSTCONF = "internetnl.hosts"

‎internetnl/urls.py‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
# Copyright: 2022, ECP, NLnet Labs and the Internet.nl contributors
22
# SPDX-License-Identifier: Apache-2.0
33
from django.urls import include, path
4+
from django.conf import settings
45

56
urlpatterns = [
67
path("", include("interface.urls")),
78
]
9+
10+
if settings.AUTORELOAD:
11+
urlpatterns += [path("__reload__/", include("django_browser_reload.urls"))]
12+
813
handler404 = "interface.views.page404"

0 commit comments

Comments
 (0)