Merge pull request #4 from hotosm/feat/set-up-frontend

Feat/set up frontend

.gitignore

@@ -4,3 +4,5 @@
 **/__pycache__/
 **/.pytest_cache/
 **/.venv/
+node_modules
+/dist/

Dockerfile

@@ -1,5 +1,12 @@
 ARG PYTHON_IMG_TAG=3.11
+ARG NODE_IMG_TAG=20.5.1
 
+FROM node:${NODE_IMG_TAG}-bookworm-slim as frontend-base
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
 
 # Define the base stage
 FROM docker.io/python:${PYTHON_IMG_TAG}-slim-bookworm as base
@@ -51,13 +58,17 @@ RUN set -ex \
         "libjpeg62-turbo-dev" \
         "zlib1g-dev" \
         "libwebp-dev" \
+        "nodejs" \
+        "npm" \
     && rm -rf /var/lib/apt/lists/*
 COPY --from=extract-deps \
     /opt/python/requirements.txt /opt/python/
+# Copy the built CSS from the Node.js stage
+# COPY --from=frontend-base /dist/ /dist/
+# Install dependencies
 RUN pip install --user --no-warn-script-location \
     --no-cache-dir -r /opt/python/requirements.txt
 
-
 # Define run stage
 FROM base as runtime
 ARG PYTHON_IMG_TAG
@@ -88,10 +99,15 @@ COPY --chown=wagtail:wagtail container-entrypoint.sh /
 COPY --from=build \
     /root/.local \
     /home/wagtail/.local
+# Copy compiled css from frontend stage
+COPY --from=frontend-base \
+    /app/dist \
+    /app/dist
 # Use /app folder as a directory where the source code is stored.
 WORKDIR /app
 # Copy project
 COPY . /app/
+
 # Add non-root user, permissions
 RUN useradd -u 1001 -m -c "hotosm account" -d /home/wagtail -s /bin/false wagtail \
     && chown -R wagtail:wagtail /app /home/wagtail \

home/templates/home/home_page.html

@@ -1,13 +1,16 @@
 {% extends "base.html" %}
 {% load static %}
+{% load compress %}
 {% block body_class %}
     template-homepage
 {% endblock body_class %}
 {% block extra_css %}
     {% comment %}
 Delete the line below if you're just getting started and want to remove the welcome screen!
     {% endcomment %}
-    <link rel="stylesheet" href="{% static 'css/welcome_page.css' %}">
+    {% compress css %}
+        <link rel="stylesheet" href="{% static 'css/welcome_page_processed.css' %}">
+    {% endcompress css %}
 {% endblock extra_css %}
 {% block content %}
     {% comment %}

hot_osm/settings/base.py

@@ -27,9 +27,6 @@
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/
 
-
-# Application definition
-
 INSTALLED_APPS = [
     "home",
     "search",
@@ -53,6 +50,7 @@
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
+    "compressor",
 ]
 
 MIDDLEWARE = [
@@ -140,12 +138,17 @@
 STATICFILES_FINDERS = [
     "django.contrib.staticfiles.finders.FileSystemFinder",
     "django.contrib.staticfiles.finders.AppDirectoriesFinder",
+    "compressor.finders.CompressorFinder",
 ]
 
 STATICFILES_DIRS = [
-    os.path.join(PROJECT_DIR, "static"),
+    "dist",
 ]
 
+# Djang Compressor settings
+# https://django-compressor.readthedocs.io
+COMPRESS_ENABLED = True
+
 # ManifestStaticFilesStorage is recommended in production, to prevent outdated
 # JavaScript / CSS assets being served from cache (e.g. after a Wagtail upgrade).
 # See https://docs.djangoproject.com/en/4.2/ref/contrib/staticfiles/#manifeststaticfilesstorage
@@ -159,7 +162,7 @@
     },
 }
 
-STATIC_ROOT = os.path.join(BASE_DIR, "static")
+STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
 STATIC_URL = "/static/"
 
 MEDIA_ROOT = os.path.join(BASE_DIR, "media")

hot_osm/settings/dev.py

@@ -8,6 +8,8 @@
 
 EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
 
+INSTALLED_APPS = INSTALLED_APPS + ["django_browser_reload"]  # noqa: F405
+MIDDLEWARE = MIDDLEWARE + ["django_browser_reload.middleware.BrowserReloadMiddleware"]  # noqa: F405
 
 try:
     from .local import *

hot_osm/urls.py

@@ -12,6 +12,7 @@
     path("admin/", include(wagtailadmin_urls)),
     path("documents/", include(wagtaildocs_urls)),
     path("search/", search_views.search, name="search"),
+    path("__reload__/", include("django_browser_reload.urls", namespace="django_browser_reload")),
 ]