Merge pull request #593 from opensafely-core/vite-setup

Add Vite and Tailwind set up
opensafely-core · Aug 27, 2024 · 048713c · 048713c
2 parents 37e4c5a + a7b10a8
commit 048713c
Show file tree

Hide file tree

Showing 17 changed files with 2,859 additions and 6 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -33,6 +33,20 @@ jobs:
         with:
           python-version: "3.11"
           install-just: true
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".node-version"
+          cache: "npm"
+          cache-dependency-path: package-lock.json
+
+      - name: Install node_modules
+        run: npm ci
+
+      - name: Build assets
+        run: npm run build
+
       - name: Set up development environment
         run: just devenv
 

diff --git a/.gitignore b/.gitignore
@@ -16,3 +16,7 @@ __pycache__/
 
 # docs
 /mkdocs_build/
+
+# Node.js
+node_modules/
+assets/out
diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+20
diff --git a/airlock/settings.py b/airlock/settings.py
@@ -250,7 +250,13 @@ def get_env_var(name):
 
 ASSETS_DIST = BASE_DIR / "assets/dist"
 
-STATICFILES_DIRS = [ASSETS_DIST, DOCS_DIR]
+# HACK ALERT! I generally don't like supplying defaults like this: ideally, all config
+# would have to be explicitly defined in the environment but this is currently the only
+# way to get things to work with docker-compose. See:
+# https://github.com/opensafely-core/airlock/issues/634
+BUILT_ASSETS = BASE_DIR / os.environ.get("BUILT_ASSETS", "assets/out")
+
+STATICFILES_DIRS = [ASSETS_DIST, DOCS_DIR, BUILT_ASSETS]
 
 # Sessions
 
@@ -269,6 +275,10 @@ def get_env_var(name):
 
 DJANGO_VITE = {
     "default": {
+        "dev_mode": False,
+        "manifest_path": BUILT_ASSETS / "manifest.json",
+    },
+    "job_server": {
         # vite assumes collectstatic, so tell it where the manifest is directly
         "manifest_path": ASSETS_DIST / ".vite/manifest.json",
     },

diff --git a/airlock/templates/activity.html b/airlock/templates/activity.html
@@ -83,6 +83,6 @@
   {% endif %}
 {% /card %}
 
-{% vite_asset "assets/src/scripts/components.js" %}
+{% vite_asset "assets/src/scripts/components.js" app="job_server" %}
 <script defer src="{% static 'assets/activity.js' %}"></script>
 <script defer src="{% static 'assets/datatable-loader.js' %}"></script>
diff --git a/airlock/templates/base.html b/airlock/templates/base.html
@@ -13,7 +13,8 @@
     {% block extra_meta %}{% endblock %}
 
     {% vite_hmr_client %}
-    {% vite_asset "assets/src/scripts/base.js" %}
+    {% vite_asset "assets/src/scripts/base.js" app="job_server" %}
+    {% vite_asset "assets/src/scripts/main.js" %}
 
     <link rel="stylesheet" href="{% static 'assets/components.css' %}">
     <link rel="stylesheet" href="{% static 'assets/icons.css' %}">

diff --git a/airlock/templates/file_browser/csv.html b/airlock/templates/file_browser/csv.html
@@ -6,8 +6,8 @@
 <html lang="en">
   <head>
     {% vite_hmr_client %}
-    {% vite_asset "assets/src/scripts/base.js" %}
-    {% vite_asset "assets/src/scripts/components.js" %}
+    {% vite_asset "assets/src/scripts/base.js" app="job_server" %}
+    {% vite_asset "assets/src/scripts/components.js" app="job_server" %}
     <link rel="stylesheet" href="{% static 'assets/datatable.css' %}">
     <link rel="stylesheet" href="{% static 'assets/icons.css' %}">
   </head>

diff --git a/airlock/templates/file_browser/directory.html b/airlock/templates/file_browser/directory.html
@@ -74,7 +74,7 @@
 
     </form>
 
-    {% vite_asset "assets/src/scripts/components.js" %}
+    {% vite_asset "assets/src/scripts/components.js" app="job_server" %}
 
     <script type="text/javascript">
       // ensure datatable is initialised when loading over HTMX

diff --git a/assets/src/scripts/main.js b/assets/src/scripts/main.js
@@ -0,0 +1,2 @@
+import "vite/modulepreload-polyfill";
+import "../styles/main.css";
diff --git a/assets/src/styles/main.css b/assets/src/styles/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/docker/Dockerfile b/docker/Dockerfile
@@ -1,4 +1,6 @@
 # syntax=docker/dockerfile:1.2
+ARG NODE_VERSION=20
+
 #################################################
 #
 # Create base image with python installed.
@@ -26,6 +28,28 @@ RUN --mount=type=cache,target=/var/cache/apt \
     /root/docker-apt-install.sh /tmp/dependencies.txt
 
 
+#################################################
+#
+# Create node image.
+#
+FROM node:${NODE_VERSION} AS node-builder
+
+WORKDIR /usr/src/app
+
+# copy just what npm ci needs
+COPY package-lock.json package.json ./
+RUN --mount=type=cache,target=/usr/src/app/.npm \
+    npm set cache /usr/src/app/.npm && \
+    npm ci
+
+# just copy in the files `npm run build` needs
+COPY vite.config.js tailwind.config.js postcss.config.js ./
+COPY airlock/templates ./airlock/templates
+COPY assets/templates ./assets/templates
+COPY assets/src ./assets/src
+
+RUN --mount=type=cache,target=./npm npm run build
+
 ##################################################
 #
 # Build image
@@ -83,6 +107,10 @@ WORKDIR /app
 # are readable by all.
 COPY --from=builder /opt/venv /opt/venv
 
+# copy node assets over from node-builder image. These will have root:root ownership, but
+# are readable by all.
+COPY --from=node-builder /usr/src/app/assets/out /opt/assets
+
 # Asset and staticfile management
 #
 # We support two dev environment side-by-side. Docker-based, which is the same

diff --git a/justfile b/justfile
@@ -226,3 +226,59 @@ docs-serve *ARGS: devenv
 docs-build *ARGS: devenv
     "$BIN"/mkdocs build --clean {{ ARGS }}
 
+
+# Remove built assets and node_modules
+assets-clean:
+    rm -rf assets/out
+    rm -rf node_modules
+
+
+# Install the Node.js dependencies
+assets-install *args="":
+    #!/usr/bin/env bash
+    set -euo pipefail
+
+
+    # exit if lock file has not changed since we installed them. -nt == "newer than",
+    # but we negate with || to avoid error exit code
+    test package-lock.json -nt node_modules/.written || exit 0
+
+    npm ci {{ args }}
+    touch node_modules/.written
+
+
+# Build the Node.js assets
+assets-build:
+    #!/usr/bin/env bash
+    set -euo pipefail
+
+    # find files which are newer than dist/.written in the src directory. grep
+    # will exit with 1 if there are no files in the result.  We negate this
+    # with || to avoid error exit code
+    # we wrap the find in an if in case dist/.written is missing so we don't
+    # trigger a failure prematurely
+    if test -f assets/out/.written; then
+        find assets/src -type f -newer assets/out/.written | grep -q . || exit 0
+    fi
+
+    npm run build
+    touch assets/out/.written
+
+
+# Install npm toolchain, build and collect assets
+assets: assets-install assets-build
+
+# Rebuild all npm/static assets
+assets-rebuild: assets-clean assets
+
+# Run the npm development server and watch for changes
+assets-run: assets-install
+    #!/usr/bin/env bash
+    set -euo pipefail
+
+    if [ "$ASSETS_DEV_MODE" == "False" ]; then
+        echo "Set ASSETS_DEV_MODE to a truthy value to run this command"
+        exit 1
+    fi
+
+    npm run dev