frontend to vite

.github/workflows/integration.yml

@@ -191,8 +191,6 @@ jobs:
         with:
           # For sonar-scanner to work properly we can't use a shallow fetch.
           fetch-depth: 0
-      - name: Setup kernel for react, increase watchers
-        run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
@@ -207,19 +205,13 @@ jobs:
         run: corepack enable
       - name: use new yarn
         run: yarn set version berry
-      - name: Setup yarn for scoped artifactory packages
-        working-directory: ./web
-        run: yarn config set npmScopes.psu.npmRegistryServer https://artifacts.developer.gov.bc.ca/artifactory/api/npm/pe1e-psu-npm-local/ && yarn config set npmScopes.psu.npmAlwaysAuth true && yarn config set npmScopes.psu.npmAuthToken ${{ secrets.ARTIFACTORY_SVCACCT_TOKEN }}
       - name: Install node dependencies (web)
         working-directory: ./web
         if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: yarn install
       - name: Lint (web)
         working-directory: ./web
         run: yarn run lint
-      # "Error: ENOSPC: System limit for number of file watchers reached" can be addressed
-      # with this: https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers#the-technical-details
-      # It seems unnecessary at the moment because tests pass anyway
       - name: Cypress tests with coverage (web)
         working-directory: ./web
         run: yarn run cypress:ci
@@ -229,7 +221,6 @@ jobs:
       - name: Merge and finalize test coverage (web)
         working-directory: ./web
         run: yarn run finalizeCoverage
-
       - name: Archive coverage report
         uses: actions/upload-artifact@v4
         with:

.vscode/settings.json

@@ -8,7 +8,6 @@
         ".github": false,
         "**/.pytest_cache": true,
         "**/__pycache__**": true,
-        "web/node_modules": true,
         "api/python_cache": true,
         "api/.venv": true
     },

Dockerfile.web

@@ -6,30 +6,20 @@
 ARG NODE_OPTIONS="--v8-pool-size=4"
 
 # PHASE 1 - build frontend.
-# Pull from local registry - we can't pull from docker due to limits.
-# see https://catalog.redhat.com/software/containers/ubi9/nodejs-20/64770ac7a835530172eee6a9 for
-# details
-FROM registry.access.redhat.com/ubi9/nodejs-20 as static
-
+FROM node:20-alpine AS static
 # Switch to root user for package installs
 USER 0
+WORKDIR /app
 
 COPY web/package.json .
 COPY web/yarn.lock . 
 COPY web/.yarnrc.yml .
 # do install first so it will be cached
-RUN npm install -g --ignore-scripts corepack
-RUN corepack enable
-RUN yarn set version berry
-RUN yarn config set npmScopes.psu.npmRegistryServer https://artifacts.developer.gov.bc.ca/artifactory/api/npm/pe1e-psu-npm-local/
-RUN yarn config set npmScopes.psu.npmAlwaysAuth true 
-RUN yarn config set npmScopes.psu.npmAuthToken ${ARTIFACTORY_SVCACCT_TOKEN}
-RUN CYPRESS_INSTALL_BINARY=0 yarn install --immutable
+RUN corepack enable \
+    && yarn set version berry \
+    && CYPRESS_INSTALL_BINARY=0 yarn install --immutable
 COPY web .
-RUN yarn run build:prod
-
-# Remove sourcemaps after they've been uploaded to sentry
-RUN rm build/static/js/**.map
+RUN yarn run build:prod 
 
 # Switch back to default user
 USER 1001
@@ -42,7 +32,7 @@ FROM registry.access.redhat.com/ubi8/nginx-120
 ADD ./openshift/nginx.conf "${NGINX_CONF_PATH}"
 
 # Copy the static content:
-COPY --from=static /opt/app-root/src/build .
+COPY --from=static /app/build .
 
 EXPOSE 3000
 CMD nginx -g "daemon off;"

web/.env.cypress

@@ -1,9 +1,9 @@
 BROWSER=none
 PORT=3030
-REACT_APP_API_BASE_URL=http://localhost:8080/api
-REACT_APP_HIDE_DISCLAIMER=false
-REACT_APP_KEYCLOAK_AUTH_URL=https://keycloak-auth-url.ca
-REACT_APP_SM_LOGOUT_URL=https://sm-logout-url.ca
-REACT_APP_KEYCLOAK_REALM=8wl6x4cp
-REACT_APP_KEYCLOAK_CLIENT=wps-web
-REACT_APP_PMTILES_BUCKET=https://nrs.objectstore.gov.bc.ca/gpdqha/psu/pmtiles/
+VITE_API_BASE_URL=http://localhost:8080/api
+VITE_HIDE_DISCLAIMER=false
+VITE_KEYCLOAK_AUTH_URL=https://keycloak-auth-url.ca
+VITE_SM_LOGOUT_URL=https://sm-logout-url.ca
+VITE_KEYCLOAK_REALM=8wl6x4cp
+VITE_KEYCLOAK_CLIENT=wps-web
+VITE_PMTILES_BUCKET=https://nrs.objectstore.gov.bc.ca/gpdqha/psu/pmtiles/

web/.env.example

@@ -1,12 +1,11 @@
-REACT_APP_API_BASE_URL=http://localhost:8080/api
-REACT_APP_HIDE_DISCLAIMER=true
-REACT_APP_KEYCLOAK_AUTH_URL=https://dev.loginproxy.gov.bc.ca/auth
-REACT_APP_SM_LOGOUT_URL=https://logontest7.gov.bc.ca/clp-cgi/logoff.cgi?retnow=1&returl=
-REACT_APP_KEYCLOAK_REALM=standard
-REACT_APP_KEYCLOAK_CLIENT=wps-web
-REACT_APP_MS_TEAMS_SPRINT_REVIEW_URL=http://localhost:3000
-REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL=http://localhost:3000
-REACT_APP_PMTILES_BUCKET=https://My_S3_Bucket
-REACT_APP_SENTRY_DSN=123
-REACT_APP_SENTRY_ENV=development
-REACT_APP_MUI_LICENSE_KEY=mui
+VITE_API_BASE_URL=http://localhost:8080/api
+VITE_HIDE_DISCLAIMER=true
+VITE_KEYCLOAK_AUTH_URL=https://dev.loginproxy.gov.bc.ca/auth
+VITE_KEYCLOAK_REALM=standard
+VITE_KEYCLOAK_CLIENT=wps-web
+VITE_MS_TEAMS_SPRINT_REVIEW_URL=http://localhost:3000
+VITE_MIRO_SPRINT_REVIEW_BOARD_URL=http://localhost:3000
+VITE_PMTILES_BUCKET=https://My_S3_Bucket
+VITE_SENTRY_DSN=123
+VITE_SENTRY_ENV=development
+VITE_MUI_LICENSE_KEY=mui

web/.gitignore

@@ -7,4 +7,5 @@
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+cypress/downloads

web/README.md

@@ -67,9 +67,9 @@ It correctly bundles React in production mode and optimizes the build for the be
 
 ## Config
 
-In `openshift/templates/global.config.yaml` there is a template for a global ConfigMap. This template can be applied to the Openshift project from the command line. For example, to apply the global.config template and pass a value for the REACT_APP_KEYCLOAK_REALM parameter, run
+In `openshift/templates/global.config.yaml` there is a template for a global ConfigMap. This template can be applied to the Openshift project from the command line. For example, to apply the global.config template and pass a value for the VITE_KEYCLOAK_REALM parameter, run
 
-`oc -n <openshift-project-name> process -f openshift/templates/global.config.yaml -p REACT_APP_KEYCLOAK_REALM=<realm-name> | oc create -f -`
+`oc -n <openshift-project-name> process -f openshift/templates/global.config.yaml -p VITE_KEYCLOAK_REALM=<realm-name> | oc create -f -`
 
 ## License
 

web/cypress.config.cjs

@@ -0,0 +1,16 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  screenshotOnRunFailure: false,
+  retries: 1,
+  video: false,
+  defaultCommandTimeout: 10000,
+  e2e: {
+    setupNodeEvents(on, config) {
+      require('@cypress/code-coverage/task')(on, config)
+      return config
+
+    },
+    baseUrl: 'http://localhost:3030',
+  },
+});

web/public/index.html → web/index.html

@@ -2,10 +2,6 @@
 <html lang="en">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="config.js"></script>
-    <script type="text/javascript">
-      window.env = config
-    </script>
     <!--
       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/
@@ -21,15 +17,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>