Updated frontend bundling

Author: davenquinn

frontend/CHANGELOG.md

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

frontend/Dockerfile

@@ -43,7 +43,9 @@ COPY --from=builder /usr/src/app/packages/demo-app/dist /usr/share/caddy
 
 WORKDIR /usr/share/caddy
 
-# If CORELLE_API_URL is set in the environment, substitute it in...
+COPY docker-command.sh /run/docker-command.sh
 
 EXPOSE 80
 
+CMD ["/run/docker-command.sh"]
+

frontend/docker-command.sh

@@ -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/package.json

@@ -13,8 +13,6 @@
   ],
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@parcel/packager-ts": "2.13.3",
-    "@parcel/transformer-typescript-types": "2.13.3",
     "prettier": "^3.5.1",
     "typescript": "^5.7.3"
   }

frontend/packages/demo-app/src/app.ts

@@ -29,11 +29,11 @@ function App(props) {
 
   const setTime = useCallback(
     (time) => setState({ ...state, time }),
-    [setState],
+    [setState, state],
   );
   const setModel = useCallback(
     (model) => setState({ ...state, model }),
-    [setState],
+    [setState, state],
   );
 
   const { baseURL } = useContext(APIContext);

frontend/packages/demo-app/src/control-panel.ts

@@ -101,7 +101,7 @@ const ControlPanel = function (props: ControlPanelProps) {
       h(
         "h1",
         null,
-        h("a", { href: "https://github.com/UW-Macrostrat/Corelle" }, "Corelle"),
+        h("a", { href: "https://github.com/UW-Macrostrat/corelle" }, "Corelle"),
       ),
       h("p", "Simple plate rotations."),
     ]),

frontend/packages/demo-app/src/index.ts

@@ -1,6 +1,3 @@
-//import "core-js/stable";
-//import "regenerator-runtime/runtime";
-
 import { FocusStyleManager } from "@blueprintjs/core";
 import "@blueprintjs/core/lib/css/blueprint.css";
 

frontend/packages/svg-map-layers/src/feature.ts

@@ -20,6 +20,7 @@ function usePathGenerator(plateId, context = null) {
   if (projection == null || geographyRotator == null) return null;
 
   const rotate = geographyRotator(plateId);
+
   if (rotate == null) return null;
 
   return pathGenerator(projection, rotate, context);

frontend/packages/svg-map-layers/src/plate-polygons.ts

@@ -15,6 +15,7 @@ function PlatePolygon(props) {
   const { feature, ...rest } = props;
   const { id, properties } = feature;
   const { old_lim, young_lim, plate_id } = properties;
+
   return h(PlateFeature, {
     feature,
     oldLim: old_lim,

frontend/yarn.lock

@@ -1195,15 +1195,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@parcel/packager-ts@npm:2.13.3":
-  version: 2.13.3
-  resolution: "@parcel/packager-ts@npm:2.13.3"
-  dependencies:
-    "@parcel/plugin": "npm:2.13.3"
-  checksum: 10c0/96d8d6c05d5d89e18b6f26b9f479f824c8c165a1582cc5a6ce8532233ca20960946b7825e34e46b51df40963fefd6314bc40409f6187b4469aa23e44d7d06ac1
-  languageName: node
-  linkType: hard
-
 "@parcel/packager-wasm@npm:2.13.3":
   version: 2.13.3
   resolution: "@parcel/packager-wasm@npm:2.13.3"
@@ -1500,33 +1491,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@parcel/transformer-typescript-types@npm:2.13.3":
-  version: 2.13.3
-  resolution: "@parcel/transformer-typescript-types@npm:2.13.3"
-  dependencies:
-    "@parcel/diagnostic": "npm:2.13.3"
-    "@parcel/plugin": "npm:2.13.3"
-    "@parcel/source-map": "npm:^2.1.1"
-    "@parcel/ts-utils": "npm:2.13.3"
-    "@parcel/utils": "npm:2.13.3"
-    nullthrows: "npm:^1.1.1"
-  peerDependencies:
-    typescript: ">=3.0.0"
-  checksum: 10c0/dee381572ba3b70339ba3252d7fb2cd9da672f24f5ee0d21d0c002064877cd90260dee59a524c40e61f0942941ee14188943474c72a8b1e3a5c3ff9aa3ab1e48
-  languageName: node
-  linkType: hard
-
-"@parcel/ts-utils@npm:2.13.3":
-  version: 2.13.3
-  resolution: "@parcel/ts-utils@npm:2.13.3"
-  dependencies:
-    nullthrows: "npm:^1.1.1"
-  peerDependencies:
-    typescript: ">=3.0.0"
-  checksum: 10c0/770935e24218d32ed5c9d5685d4e9a79fddf22e7480e0c9c7e5163d8ff70d2e8622bc9ff53ea1f965aa574d301044b9fbe2cd56729171817615233e33e2c5c71
-  languageName: node
-  linkType: hard
-
 "@parcel/types-internal@npm:2.13.3":
   version: 2.13.3
   resolution: "@parcel/types-internal@npm:2.13.3"
@@ -4654,8 +4618,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "root-workspace-0b6124@workspace:."
   dependencies:
-    "@parcel/packager-ts": "npm:2.13.3"
-    "@parcel/transformer-typescript-types": "npm:2.13.3"
     prettier: "npm:^3.5.1"
     typescript: "npm:^5.7.3"
   languageName: unknown