Deperecate use of process.env, add healthcheck

- Update references to use window.env
- add default env.js file to public
- Clean up various comments about config
- update URLs to use beehive defaults for dev
- update docker build to use static config
- update github workflow to build to static directory and use that to build dockerfile

.dockerignore

@@ -1,5 +1,4 @@
 .git
 .idea
-build
 
 **/*.env*

.env.production

@@ -1 +1 @@
-PUBLIC_URL=http://localhost:3333/
+PUBLIC_URL=./

.github/workflows/docker-publish.yml

@@ -17,6 +17,10 @@ jobs:
         run: |
           git fetch --prune --unshallow
           echo "REACT_APP_APP_VERSION=$(git describe --tags --abbrev=0) ($(git rev-parse --abbrev-ref HEAD):$(git log -1 --format=%h))" >> $GITHUB_ENV
+      - name: Build npm package
+        run: |
+          npm ci
+          npm run build
       - name: Publish to Registry
         uses: docker/build-push-action@v1
         with:

Makefile

@@ -4,12 +4,12 @@ port = 30502
 public_url = http://localhost:${port}
 
 image:
-	@SDP_TAG=$(tag) SDP_PORT=$(port) SDP_PUBLIC_URL=$(public_url) docker compose -f docker/docker-compose.yaml build --build-arg REACT_APP_APP_VERSION='$(shell ./generate-commitish.sh)'
+	@SDP_TAG=$(tag) SDP_PORT=$(port) docker compose -f docker/docker-compose.yaml build --build-arg REACT_APP_APP_VERSION='$(shell ./generate-commitish.sh)'
 
 up:
-	@SDP_TAG=$(tag) SDP_PORT=$(port) SDP_PUBLIC_URL=$(public_url) docker compose -f docker/docker-compose.yaml up -d --force-recreate
-	@echo "Station Data Portal running at $(public_url)"
+	@SDP_TAG=$(tag) SDP_PORT=$(port) docker compose -f docker/docker-compose.yaml up -d --force-recreate
+	@echo "Station Data Portal running on $(port)"
 	@docker logs -f station-data-portal-frontend
 
 down:
-	@SDP_TAG=$(tag) SDP_PORT=$(port) SDP_PUBLIC_URL=$(public_url) docker compose -f docker/docker-compose.yaml down
+	@SDP_TAG=$(tag) SDP_PORT=$(port) docker compose -f docker/docker-compose.yaml down

docker/Dockerfile

@@ -1,39 +1,16 @@
-# This Dockerfile adapted from https://mherman.org/blog/dockerizing-a-react-app/
-# and Client Explorer Dockerfile.
 
-# This Dockerfile can (and should) be used to pass through automatically generated
-# version information to the build which is triggered when the image is run.
-# To do this, issue the following build command:
-#
-# docker build --build-arg REACT_APP_APP_VERSION="$(./generate-commitish.sh)" -t <tag> .
 
-# At this moment, Node.js 10.16 LTS is recommended for most users.
-#
-# In future, as we scale up, we may want to use an Alpine base image, which would reduce
-# the size of the image by about an order of magnitude and reduce the attack surface of
-# the image as well.
+FROM node:22
 
-FROM node:16
+RUN npm install -g serve
 
-ADD . /app
+ADD build /app
+ADD docker/entrypoint.sh /app/docker/entrypoint.sh
 WORKDIR /app
 RUN chown node /app
 
-ENV PATH /app/node_modules/.bin:$PATH
-COPY --chown=node:node  package.json /app/package.json
-
-# Currently, we have to force install. For details, see ./docs/installation.md
-RUN npm install --quiet --force
-RUN npm install -g serve
-COPY --chown=node:node . /app
-
+USER node
 EXPOSE 8080
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 CMD [ "curl", "-f", "http://localhost:8080/healthcheck.js" ]
 
-# Move the build arg REACT_APP_APP_VERSION into an
-# environment variable of the same name, for consumption
-# by the npm build process in ./entrypoint.sh
-ARG REACT_APP_APP_VERSION
-ENV REACT_APP_APP_VERSION $REACT_APP_APP_VERSION
-
-USER node
-ENTRYPOINT docker/entrypoint.sh
+ENTRYPOINT ["docker/entrypoint.sh"]

docker/bc-config.yaml

@@ -1,13 +1,8 @@
 appTitle: BC Station Data - PCDS
 baseMap: BC
 
-# sdsUrl values will be replaced by dev or prod URLs when they become ready.
-# For now, we have demo instances inside the firewall.
-# Uses monsoon database
-#sdsUrl: http://docker-dev02.pcic.uvic.ca:30512
-# Uses new database
-#sdsUrl: http://docker-dev02.pcic.uvic.ca:30562
-sdsUrl: http://localhost:5000
+# Uses swarm based dev url by default
+sdsUrl: https://beehive.pacificclimate.org/station-data-portal/pcds/metadata/
 
 # Currently deployed metadata backends do not respond to provinces QP.
 # When they do, we can invert the commenting out below.
@@ -17,9 +12,7 @@ stationFilters: histories[0].province = "BC"
 # Always necessary for CRMP database
 networkFilters: name != "PCIC Climate Variables"
 
-# pdpDataUrl values will be replaced by dev or prod URLs when they become ready.
-# For now, we have a demo instance inside the firewall, below.
 # Uses monsoon database
-pdpDataUrl: http://docker-dev02.pcic.uvic.ca:30514
+pdpDataUrl: https://beehive.pacificclimate.org/station-data-portal/pcds/data/
 # Uses new database
 #pdpDataUrl: http://docker-dev02.pcic.uvic.ca:???

docker/bc.env.js

@@ -0,0 +1,5 @@
+window.env = {
+  PUBLIC_URL: "http://localhost:30502/",
+  REACT_APP_BC_BASE_MAP_TILES_URL:
+    "https://services.pacificclimate.org/tiles/bc-albers-lite/{z}/{x}/{y}.png",
+};

docker/docker-compose.yaml

@@ -2,7 +2,6 @@
 #
 # `SDP_TAG`: Image tag
 # `SDP_PORT`: External port to map to
-# `SDP_PUBLIC_URL`: Public URL of app
 # Note: These values are set as part of the makefile, initialize the container
 # Using it.
 #
@@ -19,14 +18,11 @@ services:
       dockerfile: ./docker/Dockerfile
     #image: pcic/station-data-portal-frontend:${SDP_TAG}
     container_name: station-data-portal-frontend
-    environment:
-      - PUBLIC_URL=${SDP_PUBLIC_URL}
-    env_file:
-      - bc.env
     volumes:
       - type: bind
         source: ./bc-config.yaml
-        target: /app/public/config.yaml
+        target: /app/config.yaml
         read_only: true
+      - ./bc.env.js:/app/env.js
     ports:
       - "${SDP_PORT}:8080"

docker/entrypoint.sh

@@ -1,8 +1,3 @@
-# We build the app as part of the container startup so that the build process
-# can consume the runtime environment variables. (CRA apps can only access
-# environment variables at build time, not at run time.) This makes starting a
-# container a lot heavier, but we don't spin up many instances, or often,
-# so it doesn't matter.
+#!/bin/bash
 
-npm run build
-serve -s build -l 8080
+serve -s . -l 8080

docker/ynwt-config.yaml

@@ -4,7 +4,7 @@ baseMap: YNWT
 # sdsUrl values will be replaced by prod URLs when they become ready.
 # For now, we have a dev instance.
 # Uses monsoon database
-sdsUrl: https://services.pacificclimate.org/dev/ynwt/meta
+sdsUrl: https://beehive.pacificclimate.org/station-data-portal/ynwt/metadata/
 
 # We do not at present need to filter based on province (verify!)
 #stationsQpProvinces: YK,NT
@@ -14,4 +14,4 @@ sdsUrl: https://services.pacificclimate.org/dev/ynwt/meta
 # pdpDataUrl values will be replaced by prod URLs when they become ready.
 # For now, we have a dev instance.
 # Uses monsoon database
-pdpDataUrl: https://services.pacificclimate.org/dev/ynwt/data
+pdpDataUrl: https://beehive.pacificclimate.org/station-data-portal/ynwt/data/

docker/ynwt.env.js

@@ -0,0 +1,7 @@
+// Example environment config for a YNWT based deployment
+
+window.env = {
+  PUBLIC_URL: "http://localhost:30502/",
+  REACT_APP_YNWT_BASE_MAP_TILES_URL:
+    "https://services.pacificclimate.org/tiles/yukon-albers-lite/{z}/{x}/{y}.png",
+};

package.json

@@ -17,7 +17,7 @@
     "lethargy": "^1.0.9",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
-    "pcic-react-leaflet-components": "git+https://[email protected]/pacificclimate/pcic-react-leaflet-components.git#3.0.1",
+    "pcic-react-leaflet-components": "git+https://[email protected]/pacificclimate/pcic-react-leaflet-components.git#tile-url-as-prop",
     "plotly.js-basic-dist": "^2.29.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -61,7 +61,7 @@
   },
   "scripts": {
     "start": "craco start",
-    "build": "craco build",
+    "build": "REACT_APP_APP_VERSION=$(bash ./generate-commitish.sh) && craco build",
     "test": "craco test --env=jsdom",
     "eject": "react-scripts eject",
     "reinstall": "rm -rf ./node_modules; npm install --dev",

public/config.yaml

@@ -8,7 +8,7 @@ baseMap: BC
 # Uses new database
 #sdsUrl: http://docker-dev02.pcic.uvic.ca:30562
 # Local instance
-sdsUrl: http://localhost:5000
+sdsUrl: https://beehive.pacificclimate.org/station-data-portal/pcds/metadata/
 
 # Currently deployed metadata backends do not respond to provinces QP.
 # When they do, we can use stationsQpProvinces and lose stationFilters
@@ -21,7 +21,7 @@ networkFilters: name != "PCIC Climate Variables"
 # pdpDataUrl values will be replaced by dev or prod URLs when they become ready.
 # For now, we have a demo instance inside the firewall, below.
 # Uses monsoon database
-pdpDataUrl: http://docker-dev02.pcic.uvic.ca:30514
+pdpDataUrl: https://beehive.pacificclimate.org/station-data-portal/pcds/data/
 # Uses new database
 #pdpDataUrl: http://docker-dev02.pcic.uvic.ca:???
 

public/env.js

@@ -0,0 +1,7 @@
+window.env = {
+  PUBLIC_URL: "http://localhost:30502",
+  REACT_APP_BC_BASE_MAP_TILES_URL:
+    "https://swarm.pacificclimate.org/tiles/bc-albers-lite/{z}/{x}/{y}.png",
+  REACT_APP_YNWT_BASE_MAP_TILES_URL:
+    "https://swarm.pacificclimate.org/tiles/yukon-albers-lite/{z}/{x}/{y}.png",
+};

public/healthcheck.js

@@ -0,0 +1 @@
+// app is serving

public/index.html

@@ -11,8 +11,8 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="manifest" href="manifest.json" />
+    <link rel="shortcut icon" href="favicon.ico" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -23,6 +23,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Met Data Portal</title>
+    <script src="env.js"></script>
   </head>
   <body>
     <noscript> You need to enable JavaScript to run this app. </noscript>

src/components/maps/StationMap.js

@@ -65,6 +65,7 @@ const StationMapRenderer = React.memo(
   ({
     BaseMap,
     initialViewport,
+    baseMapTilesUrl,
     userShapeLayerRef,
     userShapeStyle,
     handleChangedGeometryLayers,
@@ -122,10 +123,13 @@ const StationMapRenderer = React.memo(
     const isPending =
       externalIsPending || markerUpdateIsPending || markerRenderIsPending;
 
+    console.log(baseMapTilesUrl);
+
     return (
       <BaseMap
         zoom={initialViewport.zoom}
         center={initialViewport.center}
+        baseMapTilesUrl={baseMapTilesUrl}
         preferCanvas={true}
         maxZoom={13}
       >
@@ -195,7 +199,8 @@ const StationMap = ({
 
   const userShapeLayerRef = useRef();
 
-  const { BaseMap, initialViewport } = baseMaps[config.baseMap];
+  const { BaseMap, initialViewport, baseMapTilesUrl } =
+    baseMaps[config.baseMap];
 
   const handleChangedGeometryLayers = useMemo(
     () => () => {
@@ -213,6 +218,7 @@ const StationMap = ({
       {...{
         BaseMap,
         initialViewport,
+        baseMapTilesUrl,
         userShapeLayerRef,
         userShapeStyle,
         handleChangedGeometryLayers,

src/components/maps/baseMaps.js

@@ -4,9 +4,11 @@ export default {
   BC: {
     BaseMap: BCBaseMap,
     initialViewport: BCBaseMap.initialViewport,
+    baseMapTilesUrl: window.env.REACT_APP_BC_BASE_MAP_TILES_URL,
   },
   YNWT: {
     BaseMap: YNWTBaseMap,
     initialViewport: YNWTBaseMap.initialViewport,
+    baseMapTilesUrl: window.env.REACT_APP_YNWT_BASE_MAP_TILES_URL,
   },
 };

src/index.js

@@ -30,8 +30,8 @@ import "./index.css";
  * @returns string The base URL of the app
  */
 const getBaseName = () => {
-  if (process.env.PUBLIC_URL?.indexOf(".") >= 0) {
-    return new URL(process.env.PUBLIC_URL).pathname;
+  if (window.env.PUBLIC_URL?.indexOf(".") >= 0) {
+    return new URL(window.env.PUBLIC_URL).pathname;
   }
 
   return "";

src/state/query-hooks/use-config.js

@@ -89,15 +89,15 @@ const getZoomMarkerRadius = (zmrSpec) => {
  * @returns {Promise<object>}
  */
 const fetchConfig = async () => {
-  const response = await fetch(`${process.env.PUBLIC_URL}/config.yaml`);
+  const response = await fetch(`${window.env.PUBLIC_URL}/config.yaml`);
   const yamlConfig = await response.text();
   const fetchedConfig = yaml.load(yamlConfig);
   const config = { ...defaultConfig, ...fetchedConfig };
 
   checkMissingKeys(config);
 
   // Extend config with some env var values
-  config.appVersion = process.env.REACT_APP_APP_VERSION ?? "unknown";
+  config.appVersion = window.env.REACT_APP_APP_VERSION ?? "unknown";
 
   // Extend config with some computed goodies
   // TODO: Store shouldn't know about data presentation