Merge branch 'main' of https://github.com/UW-Macrostrat/corelle

* 'main' of https://github.com/UW-Macrostrat/corelle:
  Frontend image
  Updated frontend bundling
  Deduplicated @macrostrat/svg-map-components
  Attempt to fix issue with production
  Improved styling
  Updated packages

Author: davenquinn

.github/workflows/build-push.yml

@@ -0,0 +1,27 @@
+name: Build Corelle API image
+
+permissions: read-all
+
+on:
+  push:
+    branches: ["main"]
+    tags:
+      - "v*.*.*" # glob for semver tags (including prereleases)
+  pull_request:
+    branches: [main]
+
+jobs:
+  build-api-image:
+    uses: UW-Macrostrat/build-push/.github/workflows/build-push.yaml@main
+    secrets: inherit
+    with:
+      context: .
+      image: "hub.opensciencegrid.org/macrostrat/corelle-api"
+
+  build-frontend-image:
+    uses: UW-Macrostrat/build-push/.github/workflows/build-push.yaml@main
+    secrets: inherit
+    with:
+      context: ./frontend
+      file: ./frontend/Dockerfile
+      image: "hub.opensciencegrid.org/macrostrat/corelle-frontend"

frontend/.dockerignore

@@ -1,3 +1,12 @@
 .cache
-dist
-node_modules
+.yarn/cache
+.yarn/unplugged
+.yarn/install-state.gz
+.pnp.cjs
+.pnp.loader.mjs
+.env
+.env.local
+packages/demo-app/dist
+packages/demo-app/node_modules
+Dockerfile
+scripts

frontend/.yarn/releases/yarn-4.9.4.cjs

@@ -1,2 +1,5 @@
 pnpFallbackMode: all
+
 pnpMode: loose
+
+yarnPath: .yarn/releases/yarn-4.9.4.cjs

frontend/.yarnrc.yml

@@ -0,0 +1,4 @@
+## [2025-09-02]
+
+- Upgrade the demo app to compile using Vite
+- Pull in environment variables at runtime.

frontend/CHANGELOG.md

@@ -1,10 +1,51 @@
-FROM node:12
+FROM node:20 AS builder
 
-WORKDIR /app/
-COPY package.json /app/
+# The following build sequence is adapted from the Macrostrat web repository
+# Install rsync
+RUN apt-get update && apt-get install -y rsync
 
-RUN npm install -g parcel-bundler && npm install
+ENV NODE_ENV=production
 
-COPY ./ /app/
+WORKDIR /usr/src/app
+COPY .yarn/releases .yarn/releases
+COPY .yarnrc.yml yarn.lock package.json ./
+
+# Copy only the elements needed for a Yarn install to take advantage of
+# Docker's layer caching
+# This is complex because we are working with multiple workspaces.
+
+# Copy package JSON files with wildcards
+# This scoops up all package.json files in the directory and subdirectories
+# to deal with Yarn workspaces. However it requires BUILDKIT to be enabled,
+# which is done by setting DOCKER_BUILDKIT=1 in the environment
+RUN --mount=type=bind,target=/docker-context \
+    cd /docker-context/; \
+    find . -name "package.json" -mindepth 0 -maxdepth 5 -exec cp --parents "{}" /usr/src/app/ \;
+
+# Load the cache from the previous build
+RUN --mount=type=cache,target=/yarn-cache \
+     rsync -a /yarn-cache/ .yarn/cache/ \
+  && yarn install --immutable \
+  && rsync -a .yarn/cache/ /yarn-cache
+
+# # Remove rsync
+RUN apt-get remove -y rsync
+
+COPY . ./
+
+ENV NODE_ENV=development
+
+RUN yarn run build:demo-app
+
+FROM caddy:2.10-alpine AS production
+
+COPY --from=builder /usr/src/app/packages/demo-app/dist /usr/share/caddy
+
+WORKDIR /usr/share/caddy
+
+COPY docker-command.sh /run/docker-command.sh
+
+EXPOSE 80
+
+CMD ["/run/docker-command.sh"]
 
-CMD parcel build -d /app/dist --public-url './' index.html

frontend/Dockerfile

@@ -0,0 +1,12 @@
+#!/bin/sh
+
+# If CORELLE_API_URL is set in the environment, substitute it in index.html
+if [ -n "$CORELLE_API_URL" ]; then
+  echo "Substituting CORELLE_API_URL in index.html"
+  sed -i "s|window.corelleAPIBaseURL = null|window.corelleAPIBaseURL = '$CORELLE_API_URL'|g" index.html
+else
+  echo "CORELLE_API_URL is not set, using default value."
+fi
+
+# Start caddy
+caddy run --config /etc/caddy/Caddyfile --adapter caddyfile

frontend/docker-command.sh

@@ -4,16 +4,15 @@
   "scripts": {
     "dev": "yarn workspace @corelle/demo-app run dev",
     "build": "yarn workspaces foreach -A -p run build",
-    "publish": "scripts/publish"
+    "publish": "scripts/publish",
+    "build:demo-app": "yarn workspace @corelle/demo-app run build"
   },
   "author": "Daven Quinn",
   "workspaces": [
     "packages/*"
   ],
-  "packageManager": "yarn@4.6.0",
+  "packageManager": "yarn@4.9.4",
   "devDependencies": {
-    "@parcel/packager-ts": "2.13.3",
-    "@parcel/transformer-typescript-types": "2.13.3",
     "prettier": "^3.5.1",
     "typescript": "^5.7.3"
   }

frontend/package.json

@@ -1,9 +1,15 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
     <title>Corelle plate rotations service</title>
+    <link rel="stylesheet" href="./src/app.sass">
   </head>
   <body>
+    <script type="text/javascript">
+      // Script to inject environment variables at runtime
+      window.corelleAPIBaseURL = null;
+    </script>
     <div id="root"></div>
     <script type="module" src="./src/index.ts"></script>
   </body>

frontend/packages/demo-app/index.html

@@ -6,23 +6,22 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite ."
+    "dev": "vite .",
+    "build": "vite build"
   },
   "author": "Daven Quinn",
   "license": "ISC",
   "devDependencies": {
     "sass-embedded": "^1.85.0",
-    "stylus": "^0.54.5",
     "vite": "^6.1.0"
   },
   "prettier": {},
   "dependencies": {
     "@blueprintjs/core": "^5",
     "@corelle/svg-map-layers": "workspace:^",
     "@macrostrat/hyper": "^3.0.6",
-    "@macrostrat/svg-map-components": "^1.0.2",
-    "@macrostrat/ui-components": "^4.1.0",
-    "d3-geo": "^3.1.1",
+    "@macrostrat/svg-map-components": "^1.0.5",
+    "@macrostrat/ui-components": "^4.4.6",
     "react": "^18",
     "react-dom": "^18",
     "react-fps-stats": "^0.3.1"