Dockerize ODK CF to streamline development environment setup.

Dockerfile

@@ -0,0 +1,28 @@
+FROM node:20-alpine AS build
+WORKDIR /app
+
+COPY package.json ./
+COPY package-lock.json ./
+COPY vue.config.js ./
+
+COPY *.json ./
+
+RUN npm install
+
+COPY ./src ./src
+COPY ./public ./public 
+COPY ./bin ./bin 
+COPY ./docs ./docs
+COPY ./.tx ./.tx
+COPY ./transifex ./transifex
+
+RUN npm run build
+
+FROM nginx:alpine
+RUN mkdir -p /var/tmp/nginx/client_body_temp /var/tmp/nginx/proxy_temp
+COPY ./dev.nginx.conf /etc/nginx/nginx.conf
+COPY ./common-headers.nginx.conf /etc/nginx/conf.d/common-headers.nginx.conf
+COPY --from=build /app/dist /usr/share/nginx/html 
+
+EXPOSE 8989
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -46,6 +46,11 @@ First, run ODK Central Backend.
 
 Next, build ODK Central Frontend files for development by running `npm run dev`.  The files will be outputted to `dist/`.  As you update the source code, the files will be automatically rebuilt.  `npm run dev` will also start NGINX, which will serve the files. NGINX effectively places ODK Central Frontend and ODK Central Backend at the same origin, avoiding cross-origin requests.
 
+Alternatively, you can run ODK Central Frontend using Docker. This allows for an isolated and consistent development environment. To do so, please make sure you have docker and docker-compose installed then simply run the following command:
+
+```bash
+docker-compose up --build
+```
 ODK Central Frontend will be available on port 8989.
 
 ODK Central Frontend communicates with ODK Central Backend in part using a session cookie. The cookie is `Secure`, but will be sent over HTTP on localhost. ODK Central Frontend also interacts with data collection clients and with services:

dev.nginx.conf

@@ -0,0 +1,112 @@
+# Copyright 2017 ODK Central Developers
+# See the NOTICE file at the top-level directory of this distribution and at
+# https://github.com/getodk/central-frontend/blob/master/NOTICE.
+#
+# This file is part of ODK Central. It is subject to the license terms in
+# the LICENSE file found in the top-level directory of this distribution and at
+# https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+# including this file, may be copied, modified, propagated, or distributed
+# except according to the terms contained in the LICENSE file.
+
+# This configuration file is for development only. For production, see
+# https://github.com/getodk/central.
+
+pid /var/run/nginx.pid;
+
+events {
+}
+http {
+  access_log /var/log/nginx/access.log;
+  error_log /var/log/nginx/error.log;
+  client_body_temp_path /var/tmp/nginx/client_body_temp;
+  proxy_temp_path /var/tmp/nginx/proxy_temp 1 2;
+
+  types {
+      text/html                             html htm shtml;
+      text/css                              css;
+      text/xml                              xml;
+      application/javascript                js;
+
+      text/plain                            txt;
+
+      image/png                             png;
+      image/x-icon                          ico;
+      image/svg+xml                         svg svgz;
+
+      application/font-woff                 woff;
+      application/json                      json;
+      application/vnd.ms-excel              xls;
+      application/zip                       zip;
+
+      application/vnd.openxmlformats-officedocument.spreadsheetml.sheet          xlsx;
+  }
+
+  map $sent_http_set_cookie $session_cookie {
+    ~^__Host-(session=.+)$ $1;
+  }
+
+  server {
+    listen 8989;
+    server_name localhost;
+
+    server_tokens off;
+
+    include /etc/nginx/conf.d/common-headers.nginx.conf;
+
+    client_max_body_size 100m;
+
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1280;
+    gzip_http_version 1.1;
+    gzip_types text/plain text/css application/json application/x-javascript text/xml text/csv;
+
+    location /- {
+      proxy_pass http://localhost:8005/-;
+      proxy_redirect off;
+      proxy_set_header Host $host;
+    }
+
+    location ~ ^/v\d {
+      proxy_pass http://localhost:8383;
+      proxy_redirect off;
+
+      # buffer requests, but not responses, so streaming out works.
+      proxy_request_buffering on;
+      proxy_buffering off;
+      proxy_read_timeout 2m;
+
+      # Dev-specific hacks:
+
+      # In conjunction with the map{} definition above, remap
+      # "Set-Cookie: __Host-session=..." to "Set-Cookie: session=..."
+      #
+      #   1. Cookies cannot use the "__Host-" prefix in non-HTTPs requests
+      #      see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes
+      #   2. central-backend cookie parsing is relaxed and will consider the
+      #      first cookie ending in "session" to be the session cookie
+      add_header Set-Cookie $session_cookie;
+      # re-add common headers after add_header call
+      include /etc/nginx/conf.d/common-headers.nginx.conf;
+
+      # Trick central-backend from thinking connections are coming
+      # over HTTPS so that ExpressJS will set "secure" cookies.
+      proxy_set_header X-Forwarded-Proto https;
+    }
+
+    location = /client-config.json {
+      include /etc/nginx/conf.d/common-headers.nginx.conf;
+      return 200 "{}";
+    }
+
+    location / {
+      root /usr/share/nginx/html;
+
+      include /etc/nginx/conf.d/common-headers.nginx.conf;
+      # We return this header for more files in development than we do in
+      # production. That's needed because in development, unlike production,
+      # many file names don't contain hashes.
+      add_header Cache-Control no-cache;
+    }
+  }
+}

docker-compose.yml

@@ -0,0 +1,21 @@
+version: '3.8'
+
+services:
+  central_frontend:
+    build:
+      context: .  
+      dockerfile: Dockerfile  
+    ports:
+      - "8989:8989"
+    volumes:
+      - ./dist:/usr/share/nginx/html:ro  
+      - ./dev.nginx.conf:/etc/nginx/nginx.conf:ro  
+    networks:
+      - central_frontend_network
+    restart: unless-stopped  
+    environment:  
+      - NODE_ENV=development  
+
+networks:
+  central_frontend_network:
+    driver: bridge