DBC-5462: Switch to Vite

Author: wmuldergov

.env.example

@@ -46,22 +46,22 @@ NODE_OPTIONS=<openssl-legacy-provider>
 FONTAWESOME_PACKAGE_TOKEN=<fontawesome package token>
 
 # React
-REACT_APP_API_HOST=<localhost:8000/other hostname:port or IP:port of Django server>
-REACT_APP_BASE_MAP=<base map wms url>
-REACT_APP_MAP_STYLE=<map styling url>
-REACT_APP_REPLAY_THE_DAY=<replay the day url>
-REACT_APP_ROUTE_PLANNER=<route planner url>
-REACT_APP_ROUTE_PLANNER_KEY=<route planner auth key>
-REACT_APP_GEOCODER_HOST=<geocoder url>
-REACT_APP_GEOCODER_API_AUTH_KEY=<api auth key>
-REACT_APP_ROUTABLE_LOCATIONS_HOST=<routable locations api url>
-REACT_APP_RECAPTCHA_CLIENT_ID=<reCAPTCHA client ID>
-REACT_APP_SURVEY_LINK=<exit survey link>
-REACT_APP_REPORT_WMS_LAYER=<report wms layer url>
-REACT_APP_BCEID_REGISTER_URL=<URL for BCeID basic registration page>
-REACT_APP_FROM_EMAIL=<default from address for outgoing emails>
-REACT_APP_LEGACY_URL=<legacy URL for the old DriveBC site>
-REACT_APP_MAINTENANCE_MODE=<true/false to indicate if site is in maintenance mode>
+VITE_API_HOST=<localhost:8000/other hostname:port or IP:port of Django server>
+VITE_BASE_MAP=<base map wms url>
+VITE_MAP_STYLE=<map styling url>
+VITE_REPLAY_THE_DAY=<replay the day url>
+VITE_ROUTE_PLANNER=<route planner url>
+VITE_ROUTE_PLANNER_KEY=<route planner auth key>
+VITE_GEOCODER_HOST=<geocoder url>
+VITE_GEOCODER_API_AUTH_KEY=<api auth key>
+VITE_ROUTABLE_LOCATIONS_HOST=<routable locations api url>
+VITE_RECAPTCHA_CLIENT_ID=<reCAPTCHA client ID>
+VITE_SURVEY_LINK=<exit survey link>
+VITE_REPORT_WMS_LAYER=<report wms layer url>
+VITE_BCEID_REGISTER_URL=<URL for BCeID basic registration page>
+VITE_FROM_EMAIL=<default from address for outgoing emails>
+VITE_LEGACY_URL=<legacy URL for the old DriveBC site>
+VITE_MAINTENANCE_MODE=<true/false to indicate if site is in maintenance mode>
 
 # API
 DRIVEBC_INLAND_FERRY_API_BASE_URL=<inland ferry api url>
@@ -106,12 +106,12 @@ CLOSED_PHRASE_IDS=18, 20, 22, 23, 26, 30, 32, 182, 320, 325, 327
 DRIVEBC_BORDER_CROSSING_LANE_DELAY_BASE_URL=<border crossing lane delay api url>
 
 # Route API
-REACT_APP_PRIMARY_ROUTE_GDF=<primary route GDF values>
-REACT_APP_PRIMARY_ROUTE_XINGCOST=<primary route XINGCOST values>
-REACT_APP_PRIMARY_ROUTE_TURNCOST=<primary route TURNCOST values>
-REACT_APP_ALTERNATE_ROUTE_GDF=<alternate route GDF values>
-REACT_APP_ALTERNATE_ROUTE_XINGCOST=<alternate route XINGCOST values>
-REACT_APP_ALTERNATE_ROUTE_TURNCOST=<alternate route TURNCOST values>
+VITE_PRIMARY_ROUTE_GDF=<primary route GDF values>
+VITE_PRIMARY_ROUTE_XINGCOST=<primary route XINGCOST values>
+VITE_PRIMARY_ROUTE_TURNCOST=<primary route TURNCOST values>
+VITE_ALTERNATE_ROUTE_GDF=<alternate route GDF values>
+VITE_ALTERNATE_ROUTE_XINGCOST=<alternate route XINGCOST values>
+VITE_ALTERNATE_ROUTE_TURNCOST=<alternate route TURNCOST values>
 
 # RIDE
 RIDE_EVENT_PREFIX=<RIDE event ID prefix>

compose/frontend/StaticBuild

@@ -5,18 +5,29 @@
 ############################################
 FROM node:24-alpine AS buildnode
 
-WORKDIR /app/
-COPY ./src/frontend/package.json ./src/frontend/package-lock.json ./src/frontend/.npmrc ./
+WORKDIR /app
+COPY ./src/frontend/ /app/
+
+ARG DEBUG_BUILD=false
 
 RUN --mount=type=secret,id=FONTAWESOME_PACKAGE_TOKEN \
     test -s /run/secrets/FONTAWESOME_PACKAGE_TOKEN || { echo "FONTAWESOME_PACKAGE_TOKEN secret missing"; exit 1; }; \
     export FONTAWESOME_PACKAGE_TOKEN="$(cat /run/secrets/FONTAWESOME_PACKAGE_TOKEN)" && \
     npm ci
 
 COPY ./src/frontend/ /app/
-
+ENV NODE_ENV=production
 RUN npm run openshift_build
 
+# Gzip and Brotli compress
+RUN apk add --no-cache gzip brotli && \
+    find /app/build -type f \( \
+      -name '*.js' -o -name '*.css' -o -name '*.html' -o -name '*.json' -o -name '*.svg' \
+    \) -exec sh -c ' \
+      gzip -9 -k "$1" && \
+      brotli -q 11 -k "$1" \
+    ' _ {} \;
+
 ############################################
 # Builder: compile brotli modules from     #
 # source against the exact nginx version   #
@@ -65,17 +76,7 @@ RUN mkdir -p /tmp/client_temp /tmp/proxy_temp /tmp/fastcgi_temp /tmp/uwsgi_temp
     && chmod -R 777 /tmp/client_temp /tmp/proxy_temp /tmp/fastcgi_temp /tmp/uwsgi_temp /tmp/scgi_temp /tmp/cache/nginx
 
 # Copy built assets
-RUN mkdir -p /usr/share/nginx/html
-COPY --from=buildnode /app/build /usr/share/nginx/html
-
-# --- Pre-compress Static Assets (JS, CSS, SVG) ---
-RUN echo "Pre-compressing static assets with Gzip and Brotli..." && \
-    find /usr/share/nginx/html/static/js -name "*.js" -exec gzip -k -9 {} + && \
-    find /usr/share/nginx/html/static/css -name "*.css" -exec gzip -k -9 {} + && \
-    find /usr/share/nginx/html/static/media -name "*.svg" -exec gzip -k -9 {} + && \
-    find /usr/share/nginx/html/static/js -name "*.js" -exec brotli -f -k -q 11 {} + && \
-    find /usr/share/nginx/html/static/css -name "*.css" -exec brotli -f -k -q 11 {} + && \
-    find /usr/share/nginx/html/static/media -name "*.svg" -exec brotli -f -k -q 11 {} +
+COPY --from=buildnode /app/build/ /usr/share/nginx/html/
 
 # Copy NGINX configuration files
 COPY ./compose/frontend/default.conf /etc/nginx/conf.d/default.conf

compose/frontend/generate-config.sh

@@ -15,27 +15,27 @@ cp -r /usr/share/nginx/html/* "${SHARED_CONFIG}/"
 cat > "${SHARED_CONFIG}/config_snippet.html" <<EOF
 <script>
 window.__ENV__ = {
-  BASE_MAP: '${REACT_APP_BASE_MAP}',
-  MAP_STYLE: '${REACT_APP_MAP_STYLE}',
-  API_HOST: '${REACT_APP_API_HOST}',
-  REPORT_WMS_LAYER: '${REACT_APP_REPORT_WMS_LAYER}',
-  GEOCODER_HOST: '${REACT_APP_GEOCODER_HOST}',
-  GEOCODER_API_CLIENT_ID: '${REACT_APP_GEOCODER_API_CLIENT_ID}',
-  ROUTABLE_LOCATIONS_HOST: '${REACT_APP_ROUTABLE_LOCATIONS_HOST}',
-  ROUTE_PLANNER: '${REACT_APP_ROUTE_PLANNER}',
-  ROUTE_PLANNER_CLIENT_ID: '${REACT_APP_ROUTE_PLANNER_CLIENT_ID}',
-  REPLAY_THE_DAY: '${REACT_APP_REPLAY_THE_DAY}',
-  SURVEY_LINK: '${REACT_APP_SURVEY_LINK}',
-  BCEID_REGISTER_URL: '${REACT_APP_BCEID_REGISTER_URL}',
-  FROM_EMAIL: '${REACT_APP_FROM_EMAIL}',
-  LEGACY_URL: '${REACT_APP_LEGACY_URL}',
-  RECAPTCHA_CLIENT_ID: '${REACT_APP_RECAPTCHA_CLIENT_ID}',
-  PRIMARY_ROUTE_GDF: '${REACT_APP_PRIMARY_ROUTE_GDF}',
-  PRIMARY_ROUTE_TURNCOST: '${REACT_APP_PRIMARY_ROUTE_TURNCOST}',
-  PRIMARY_ROUTE_XINGCOST: '${REACT_APP_PRIMARY_ROUTE_XINGCOST}',
-  ALTERNATE_ROUTE_GDF: '${REACT_APP_ALTERNATE_ROUTE_GDF}',
-  ALTERNATE_ROUTE_TURNCOST: '${REACT_APP_ALTERNATE_ROUTE_TURNCOST}',
-  ALTERNATE_ROUTE_XINGCOST: '${REACT_APP_ALTERNATE_ROUTE_XINGCOST}',
+  BASE_MAP: '${VITE_BASE_MAP:-$REACT_APP_BASE_MAP}',
+  MAP_STYLE: '${VITE_MAP_STYLE:-$REACT_APP_MAP_STYLE}',
+  API_HOST: '${VITE_API_HOST:-$REACT_APP_API_HOST}',
+  REPORT_WMS_LAYER: '${VITE_REPORT_WMS_LAYER:-$REACT_APP_REPORT_WMS_LAYER}',
+  GEOCODER_HOST: '${VITE_GEOCODER_HOST:-$REACT_APP_GEOCODER_HOST}',
+  GEOCODER_API_CLIENT_ID: '${VITE_GEOCODER_API_CLIENT_ID:-$REACT_APP_GEOCODER_API_CLIENT_ID}',
+  ROUTABLE_LOCATIONS_HOST: '${VITE_ROUTABLE_LOCATIONS_HOST:-$REACT_APP_ROUTABLE_LOCATIONS_HOST}',
+  ROUTE_PLANNER: '${VITE_ROUTE_PLANNER:-$REACT_APP_ROUTE_PLANNER}',
+  ROUTE_PLANNER_CLIENT_ID: '${VITE_ROUTE_PLANNER_CLIENT_ID:-$REACT_APP_ROUTE_PLANNER_CLIENT_ID}',
+  REPLAY_THE_DAY: '${VITE_REPLAY_THE_DAY:-$REACT_APP_REPLAY_THE_DAY}',
+  SURVEY_LINK: '${VITE_SURVEY_LINK:-$REACT_APP_SURVEY_LINK}',
+  BCEID_REGISTER_URL: '${VITE_BCEID_REGISTER_URL:-$REACT_APP_BCEID_REGISTER_URL}',
+  FROM_EMAIL: '${VITE_FROM_EMAIL:-$REACT_APP_FROM_EMAIL}',
+  LEGACY_URL: '${VITE_LEGACY_URL:-$REACT_APP_LEGACY_URL}',
+  RECAPTCHA_CLIENT_ID: '${VITE_RECAPTCHA_CLIENT_ID:-$REACT_APP_RECAPTCHA_CLIENT_ID}',
+  PRIMARY_ROUTE_GDF: '${VITE_PRIMARY_ROUTE_GDF:-$REACT_APP_PRIMARY_ROUTE_GDF}',
+  PRIMARY_ROUTE_TURNCOST: '${VITE_PRIMARY_ROUTE_TURNCOST:-$REACT_APP_PRIMARY_ROUTE_TURNCOST}',
+  PRIMARY_ROUTE_XINGCOST: '${VITE_PRIMARY_ROUTE_XINGCOST:-$REACT_APP_PRIMARY_ROUTE_XINGCOST}',
+  ALTERNATE_ROUTE_GDF: '${VITE_ALTERNATE_ROUTE_GDF:-$REACT_APP_ALTERNATE_ROUTE_GDF}',
+  ALTERNATE_ROUTE_TURNCOST: '${VITE_ALTERNATE_ROUTE_TURNCOST:-$REACT_APP_ALTERNATE_ROUTE_TURNCOST}',
+  ALTERNATE_ROUTE_XINGCOST: '${VITE_ALTERNATE_ROUTE_XINGCOST:-$REACT_APP_ALTERNATE_ROUTE_XINGCOST}',
   DEPLOYMENT_TAG: '${DEPLOYMENT_TAG}',
   MAINTENANCE_MODE: '${MAINTENANCE_MODE}',
   RELEASE: '${RELEASE:-}',

src/frontend/.eslintrc.js

@@ -0,0 +1,37 @@
+import js from "@eslint/js";
+import globals from "globals";
+import pluginReact from "eslint-plugin-react";
+import prettierConfig from "eslint-config-prettier";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  js.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    files: ["**/*.{js,mjs,cjs,jsx}"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...globals.browser,
+        ...globals.node, 
+      },
+    },
+    settings: {
+      react: {
+        version: "detect", 
+      },
+    },
+    rules: {
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "no-unused-vars": "off",
+    },
+  },
+
+  prettierConfig,
+  
+  {
+    ignores: ["build/**", "dist/**", "node_modules/**"],
+  }
+]);

src/frontend/eslint.config.js

@@ -2,35 +2,26 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
-    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content">
     <meta name="theme-color" content="#ffffff" />
     <meta name="description" content="Check real-time BC road conditions, closures, highway webcams, and delays with DriveBC.">
     <meta name="keywords" content="DriveBC, BC road conditions, highway closures, BC traffic, travel advisories, road webcams, BC weather, ferry delays, British Columbia, travel information">
     <meta property="og:description" content="Check real-time BC road conditions, closures, highway webcams, and delays with DriveBC.">
     <meta property="og:title" content="DriveBC">
-    <meta property="og:image" content="%PUBLIC_URL%/og-image.jpg">
+    <meta property="og:image" content="/og-image.jpg">
     <meta property="og:url" content="https://www.drivebc.ca">
 
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="manifest" href="/manifest.json" />
     <link rel="preconnect" href="https://tiles.arcgis.com">
     <link rel="preconnect" href="https://www.arcgis.com">
     <title>DriveBC</title>
@@ -39,16 +30,16 @@
       font-family: 'BCSans';
       font-style: normal;
       font-weight: 400;
-      src: url('%PUBLIC_URL%/fonts/bc-sans/BCSans-Regular.woff2') format('woff2'),
-          url('%PUBLIC_URL%/fonts/bc-sans/BCSans-Regular.woff') format('woff');
+      src: url('/fonts/bc-sans/BCSans-Regular.woff2') format('woff2'),
+          url('/fonts/bc-sans/BCSans-Regular.woff') format('woff');
       font-display: swap;
     }
     @font-face {
       font-family: 'BCSans';
       font-style: normal;
       font-weight: 700;
-      src: url('%PUBLIC_URL%/fonts/bc-sans/BCSans-Bold.woff2') format('woff2'),
-          url('%PUBLIC_URL%/fonts/bc-sans/BCSans-Bold.woff') format('woff');
+      src: url('/fonts/bc-sans/BCSans-Bold.woff2') format('woff2'),
+          url('/fonts/bc-sans/BCSans-Bold.woff') format('woff');
       font-display: swap;
     }
   </style>
@@ -57,6 +48,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.