Serve static files via WhiteNoise (#68)

By default, Django refuses to serve static files in production mode (`DEBUG = False`) in order to encourage the use of solutions for a more efficient serving of static files. We now use `WhiteNoise`, which does make the serving of static files more efficient *within* the application (without having to configure an external service like the web server). For more information, see https://whitenoise.readthedocs.io/en/latest/django.html .
ad-freiburg · Dec 15, 2023 · 254a5db · 254a5db
1 parent 79b72b6
commit 254a5db
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 29 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,4 @@ db/qleverui.sqlite3
 db/qleverui.sqlite3.BACKUP*
 backend/static/js/qleverUI.js
 .DS_Store
+staticfiles
diff --git a/Dockerfile b/Dockerfile
@@ -23,6 +23,9 @@ ENV VIRTUAL_ENV /env
 ENV PATH /env/bin:$PATH
 ENV PYTHONUNBUFFERED 1
 
+# collect static resources
+RUN ./manage.py collectstatic
+
 CMD ["gunicorn", "--bind", ":7000", "--workers", "3", "--limit-request-line", "10000", "qlever.wsgi:application"]
 
 # QLever UI on port 7000 for QLever instance listening on port 7001

diff --git a/backend/templates/index.html b/backend/templates/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+{% load static %}<!DOCTYPE html>
 <html>
   {% include 'partials/head.html' %}
   <body {% if request.GET.exec %}onload="window.setTimeout(function(){ $('#exebtn').trigger('click');},500)"{% endif %}>
@@ -268,7 +268,7 @@ <h4 style="margin-top: 0px;">QLever UI Shortcuts:</h4>
 
           <!-- The loading block -->
           <div class="alert alert-success" id="infoBlock" style="display: none; text-align: center;">
-            <img src="/static/img/loader.gif"><br><br>
+            <img src="{% static "img/loader.gif" %}"><br><br>
             <h4 id="info"></h4>
           </div>
 

diff --git a/backend/templates/partials/head.html b/backend/templates/partials/head.html
@@ -1,19 +1,19 @@
-<head>
+{% load static %}<head>
   <title>The QLever SPARQL engine: fast, scalable, with autocompletion and text search</title>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="shortcut icon" type="image/png" href="/static/favicon.ico">
+  <link rel="shortcut icon" type="image/png" href="{% static "favicon.ico" %}">
 
   <!-- The stylesheets for this page -->
   <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
 
-  <!-- CSS Code for the UI  -->
-  <link rel="stylesheet" type="text/css" href="/static/css/style.css">
-  <link rel="stylesheet" type="text/css" href="/static/css/codemirror.css">
-
   <!-- Bootstraps CSS -->
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
+  <!-- CSS Code for the UI  -->
+  <link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
+  <link rel="stylesheet" type="text/css" href="{% static "css/codemirror.css" %}">
+
   <!-- The basic jQuery library & jQuery UI library -->
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
@@ -67,29 +67,29 @@
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
   <!-- Our own JavaScript code for this demo -->
-  <script src="/static/js/helper.js"></script>
-  <script src="/static/js/raphael.js"></script>
-  <script src="/static/js/treant.js"></script>
-  <script src="/static/js/qleverUI.js"></script>
+  <script src="{% static "js/helper.js" %}"></script>
+  <script src="{% static "js/raphael.js" %}"></script>
+  <script src="{% static "js/treant.js" %}"></script>
+  <script src="{% static "js/qleverUI.js" %}"></script>
 
   <!-- CodeMirror and it's modules and language mode -->
-  <script src="/static/js/codemirror/codemirror.js"></script>
-  <script src="/static/js/codemirror/modules/autocomplete.js"></script>
-  <script src="/static/js/codemirror/modules/active-line.js"></script>
-  <script src="/static/js/codemirror/modules/show-hint.js"></script>
-  <script src="/static/js/codemirror/modules/search.js"></script>
+  <script src="{% static "js/codemirror/codemirror.js" %}"></script>
+  <script src="{% static "js/codemirror/modules/autocomplete.js" %}"></script>
+  <script src="{% static "js/codemirror/modules/active-line.js" %}"></script>
+  <script src="{% static "js/codemirror/modules/show-hint.js" %}"></script>
+  <script src="{% static "js/codemirror/modules/search.js" %}"></script>
 
-  <script src="/static/js/codemirror/modes/sparql/sparql.js"></script>
-  <script src="/static/js/codemirror/modes/sparql/sparql-hint.js"></script>
+  <script src="{% static "js/codemirror/modes/sparql/sparql.js" %}"></script>
+  <script src="{% static "js/codemirror/modes/sparql/sparql-hint.js" %}"></script>
 
   {% if request.GET.test %}
-      <!-- Jasemine JS Testing Framework -->
-      <link rel="shortcut icon" type="image/png" href="/static/tests/jasmine/lib/jasmine-2.8.0/jasmine_favicon.png">
-      <link rel="stylesheet" type="text/css" href="/static/tests/jasmine/lib/jasmine-2.8.0/jasmine.css">
+    <!-- Jasemine JS Testing Framework -->
+    <link rel="shortcut icon" type="image/png" href="{% static "tests/jasmine/lib/jasmine-2.8.0/jasmine_favicon.png" %}">
+    <link rel="stylesheet" type="text/css" href="{% static "tests/jasmine/lib/jasmine-2.8.0/jasmine.css" %}">
 
-      <script type="text/javascript" src="/static/tests/jasmine/lib/jasmine-2.8.0/jasmine.js"></script>
-      <script type="text/javascript" src="/static/tests/jasmine/lib/jasmine-2.8.0/jasmine-html.js"></script>
-      <script type="text/javascript" src="/static/tests/jasmine/lib/jasmine-2.8.0/boot.js"></script>
-      <script type="text/javascript" src="/static/tests/interface.js"></script>
+    <script type="text/javascript" src="{% static "tests/jasmine/lib/jasmine-2.8.0/jasmine.js" %}"></script>
+    <script type="text/javascript" src="{% static "tests/jasmine/lib/jasmine-2.8.0/jasmine-html.js" %}"></script>
+    <script type="text/javascript" src="{% static "tests/jasmine/lib/jasmine-2.8.0/boot.js" %}"></script>
+    <script type="text/javascript" src="{% static "tests/interface.js" %}"></script>
   {% endif %}
 </head>
diff --git a/qlever/settings.py b/qlever/settings.py
@@ -31,6 +31,7 @@
 # Application definition
 
 INSTALLED_APPS = [
+    'whitenoise.runserver_nostatic',
     'django.contrib.admin',
     'django.contrib.auth', 'django.contrib.contenttypes',
     'django.contrib.sessions', 'django.contrib.messages',
@@ -39,6 +40,7 @@
 
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
+    'whitenoise.middleware.WhiteNoiseMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
@@ -47,8 +49,7 @@
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
 
-CSRF_TRUSTED_ORIGINS = ['https://*.uni-freiburg.de',
-                        'http://ad-research.cs.uni-freiburg.de:18902']
+CSRF_TRUSTED_ORIGINS = ['https://*.uni-freiburg.de']
 
 ROOT_URLCONF = 'qlever.urls'
 
@@ -121,10 +122,12 @@
 
 STATIC_URL = '/static/'
 
-STATIC_ROOT = os.path.join(BASE_DIR, "backend/static/")
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
 
 STATIC_VERSION = ""
 
+STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
+
 try:
     # Get git info from files in .git
     with open(".git/HEAD", "r") as headFile:

diff --git a/requirements.txt b/requirements.txt
@@ -2,3 +2,4 @@ django
 requests
 django-import-export
 gunicorn
+whitenoise[brotli]