Feat/system upgrade

.github/workflows/e2e.yml

@@ -44,7 +44,7 @@ jobs:
           POSTGRES_PORT: 5432
           PGHOST: localhost
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-          NODE_ENV: "development"
+          VITE_NODE_ENV: "development"
           POSTGRES_URL: "postgresql://digmkt:digmkt@localhost:5432/digmkt"
           MAILER_GMAIL_USER: "fake@gmail.com"
           MAILER_GMAIL_PASS: "password"

Dockerfile

@@ -9,10 +9,10 @@ COPY ./grunt-configs ./grunt-configs
 # `yarn install` runs twice as a workaround for development and production
 # dependencies in package.json needing better taxonomy
 
-# NODE_ENV=production is passed here to allow for specific dev env variables when NODE_ENV=development
+# VITE_NODE_ENV=production is passed here to allow for specific dev env variables when VITE_NODE_ENV=development
 # @see /src/back-end/config.ts::developmentMailerConfigOptions
 RUN yarn install --frozen-lockfile && \
-    NODE_ENV=production npm run front-end:build && \
+    VITE_NODE_ENV=production npm run front-end:build && \
     npm run back-end:build && \
     yarn install --frozen-lockfile --production && \
     yarn cache clean && \

README.md

@@ -243,7 +243,7 @@ Environment variables that affect the back-end server's functionality are stored
 
 | Name                                    | Description                                                                                                                                                                                                                                                                                                                                |
 | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `NODE_ENV`                              | The back-end run-time's environment. Possible values include either "development" or "production".                                                                                                                                                                                                                                         |
+| `VITE_NODE_ENV`                              | The back-end run-time's environment. Possible values include either "development" or "production".                                                                                                                                                                                                                                         |
 | `SERVER_HOST`                           | The IPv4 address for the back-end to bind to.                                                                                                                                                                                                                                                                                              |
 | `SERVER_PORT`                           | The TCP port for the back-end to bind to.                                                                                                                                                                                                                                                                                                  |
 | `SCHEDULED_DOWNTIME`                    | A boolean flag (set to `0` for `false`, `1` for `true`) to turn off CRUD endpoints and vend a downtime HTML page to all users when set to a non-zero number. Defaults to `false` if `SCHEDULED_DOWNTIME` is undefined or invalid.                                                                                                          |
@@ -280,8 +280,8 @@ Environment variables that affect the back-end server's functionality are stored
 | `SWAGGER_ENABLE`                        | A flag to enable the Swagger UI API documentation under `SWAGGER_UI_PATH`. Defaults to `false`.                                                                                                                                                                                                                                            |
 | `SWAGGER_UI_PATH`                       | The base path to run the Swagger UI under for serving of API documentation. Defaults to `/docs/api`.                                                                                                                                                                                                                                       |
 | `TZ`                                    | Time-zone to use for the back-end. Required by the Linux OS that runs the back-end, but not used as application configuration.                                                                                                                                                                                                             |
-| `SHOW_TEST_INDICATOR`                   | A boolean flag (set to `0` for `false`, `1` for `true`) to indicate that an environment is intended for testing purposes (prefixes emails subjects and shows a testing variant of the logo in email notifications). Defaults to `false`.                                                                                                   |
-| `LOG_LEVEL`                             | An enumerated logging level that can be used to control the level of output when running the application. Allowed values are `debug`, `info`, `warn`, `error`, and `none`. The level will default to `debug` when `NODE_ENV` is set to `development`. Otherwise, the level will default to `info` unless explicity set in the environment. |
+| `VITE_SHOW_TEST_INDICATOR`                   | A boolean flag (set to `0` for `false`, `1` for `true`) to indicate that an environment is intended for testing purposes (prefixes emails subjects and shows a testing variant of the logo in email notifications). Defaults to `false`.                                                                                                   |
+| `LOG_LEVEL`                             | An enumerated logging level that can be used to control the level of output when running the application. Allowed values are `debug`, `info`, `warn`, `error`, and `none`. The level will default to `debug` when `VITE_NODE_ENV` is set to `development`. Otherwise, the level will default to `info` unless explicity set in the environment. |
 | `DISABLE_NOTIFICATIONS`                 | A boolean flag that will disable all outgoing email notifications when set to `1` (`true`). Defaults to `0` (`false`).                                                                                                                                                                                                                     |
 | `LOG_MEM_USAGE`                         | A boolean flag (set to `0` for `false`, `1` for `true`) to enable debug-level logging of Node memory usage. Defaults to `false`.                                                                                                                                                                                                           |
 
@@ -295,10 +295,10 @@ Environment variables that affect the front-end's build process are stored and s
 
 | Name                  | Description                                                                                                                                                                                            |
 | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `NODE_ENV`            | Determines whether the front-end is built for production (e.g. minification, compression, etc). Possible values include either "development" or "production".                                          |
+| `VITE_NODE_ENV`            | Determines whether the front-end is built for production (e.g. minification, compression, etc). Possible values include either "development" or "production".                                          |
 | `CONTACT_EMAIL`       | The Digital Marketplace team's contact email address.                                                                                                                                                  |
-| `PATH_PREFIX`         | The URL path prefix that the Digital Marketplace is deployed to. For example, if deployed to `digital.gov.bc.ca/marketplace`, the value of this variable should be `marketplace`.                      |
-| `SHOW_TEST_INDICATOR` | A boolean flag (set to `0` for `false`, `1` for `true`) to indicate that an environment is intended for testing purposes (shows a testing variant of the logo in the web app UI). Defaults to `false`. |
+| `VITE_PATH_PREFIX`         | The URL path prefix that the Digital Marketplace is deployed to. For example, if deployed to `digital.gov.bc.ca/marketplace`, the value of this variable should be `marketplace`.                      |
+| `VITE_SHOW_TEST_INDICATOR` | A boolean flag (set to `0` for `false`, `1` for `true`) to indicate that an environment is intended for testing purposes (shows a testing variant of the logo in the web app UI). Defaults to `false`. |
 
 ## Deployment
 
@@ -412,4 +412,4 @@ The Digital Marketplace is currently operated by the Procurement Services Branch
 
 ## Credits
 
-This project would not have been possible by the incredible work done by open source project maintainers. The licenses for open source projects used are documented in `docs/open-source-licenses.txt`.
+This project would not have been possible by the incredible work done by open source project maintainers. The licenses for open source projects used are documented in `docs/open-source-licenses.txt`.

docker-compose.yml

@@ -11,7 +11,7 @@ services:
       - "3000:3000"
     environment:
       POSTGRES_URL: postgresql://digmkt:digmkt@db:5432/digmkt
-      NODE_ENV: ${NODE_ENV}
+      VITE_NODE_ENV: ${VITE_NODE_ENV}
     depends_on:
       - db
 

docs/build-deploy/openshift.md

@@ -99,7 +99,7 @@ oc -n ccc866-dev process -f openshift/templates/app/app-digmkt-deploy.yaml \
 -p TAG_NAME=dev \
 -p KEYCLOAK_CLIENT_SECRET=<secret> \
 -p KEYCLOAK_URL=https://dev.loginproxy.gov.bc.ca/auth \
--p SHOW_TEST_INDICATOR=1 \
+-p VITE_SHOW_TEST_INDICATOR=1 \
 -p BASIC_AUTH_USERNAME=<username> \
 -p BASIC_AUTH_PASSWORD_HASH=<hashed_password> \
 -p ORIGIN=https://app-digmkt-dev.apps.silver.devops.gov.bc.ca \
@@ -113,7 +113,7 @@ oc -n ccc866-test process -f openshift/templates/app/app-digmkt-deploy.yaml \
 -p TAG_NAME=test \
 -p KEYCLOAK_CLIENT_SECRET=<secret> \
 -p KEYCLOAK_URL=https://test.loginproxy.gov.bc.ca/auth \
--p SHOW_TEST_INDICATOR=1 \
+-p VITE_SHOW_TEST_INDICATOR=1 \
 -p ORIGIN=https://app-digmkt-test.apps.silver.devops.gov.bc.ca \
 -p HOST=app-digmkt-test.apps.silver.devops.gov.bc.ca \
 -p BASIC_AUTH_USERNAME=<username> \
@@ -127,7 +127,7 @@ oc -n ccc866-prod process -f openshift/templates/app/app-digmkt-deploy.yaml \
 -p TAG_NAME=prod \
 -p KEYCLOAK_CLIENT_SECRET=<secret> \
 -p KEYCLOAK_URL=https://loginproxy.gov.bc.ca/auth \
--p SHOW_TEST_INDICATOR=0 \
+-p VITE_SHOW_TEST_INDICATOR=0 \
 -p ORIGIN=https://marketplace.digital.gov.bc.ca \
 -p HOST=marketplace.digital.gov.bc.ca \
 -p DATABASE_SERVICE_NAME=patroni-pg12 | oc -n ccc866-prod apply -f -

docs/local-development/debug-config.md

@@ -17,7 +17,7 @@ Debugging the front-end might require evaluating MSG's in the state object.
 - dev tools in the browser
 
 1. Run the following
-`NODE_ENV=development npm run front-end:watch`
+`VITE_NODE_ENV=development npm run front-end:watch`
 
 2. Open the Console of a browser's Dev Tools to view a list of state events.
 
@@ -85,7 +85,7 @@ Debugging the front-end might require evaluating MSG's in the state object.
 
 Run the following for normal development:
 ```bash
-NODE_ENV=development npm run back-end:watch
+VITE_NODE_ENV=development npm run back-end:watch
 ```
 
 This will display server logs:

docs/onboarding.md

@@ -58,7 +58,7 @@ The front-end is built using tasks defined with Grunt. This includes:
 
 All commonly-used build scripts are aliased as NPM scripts in `package.json` for convenience.
 
-To build the front-end, simply run `NODE_ENV=development npm run front-end:build`. To build the app for production, which includes asset minification, optimization and compression, change the value of `NODE_ENV` to `production`.
+To build the front-end, simply run `VITE_NODE_ENV=development npm run front-end:build`. To build the app for production, which includes asset minification, optimization and compression, change the value of `VITE_NODE_ENV` to `production`.
 
 To watch for source file changes and rebuild the front-end during local development, execute the `npm run front-end:watch` command in your terminal.
 
@@ -101,7 +101,7 @@ The `npm run migrations:*` scripts in `package.json` are how developers can crea
 
 The back-end is compiled from TypeScript to JavaScript, which is implemented as a Grunt task.
 
-To build the back-end, simply run `NODE_ENV=development npm run back-end:build`. To build the app for production, which involves cleaning the build directory before rebuilding, change the value of `NODE_ENV` to `production`.
+To build the back-end, simply run `VITE_NODE_ENV=development npm run back-end:build`. To build the app for production, which involves cleaning the build directory before rebuilding, change the value of `VITE_NODE_ENV` to `production`.
 
 To watch for source file changes and rebuild the back-end during local development, execute the `npm run back-end:watch` command in your terminal.
 

grunt-configs/shell.js

@@ -1,5 +1,11 @@
 module.exports = {
-  frontEndTypeScript: `npx tsc --project "${gruntConfig.frontEnd.src.ts}" --outDir "${gruntConfig.frontEnd.tmp.dir}"`,
+  // frontEndTypeScript: `npx tsc --project "${gruntConfig.frontEnd.src.ts}" --outDir "${gruntConfig.frontEnd.tmp.dir}"`, // Replaced by Vite
+  frontEndViteBuildDev:
+    "VITE_NODE_ENV=development vite build --mode development",
+  frontEndViteBuildProd:
+    "VITE_NODE_ENV=production vite build --mode production",
+  frontEndViteWatch:
+    "VITE_NODE_ENV=development vite build --watch --mode development",
   backEndTypeScript: `npx tsc --project "${gruntConfig.backEnd.src.dir}" --outDir "${gruntConfig.backEnd.build.dir}"`,
   scriptsTypeScript: `npx tsc --project "${gruntConfig.scripts.src.dir}" --outDir "${gruntConfig.scripts.build.dir}"`,
   learnFrontEndTypeScript: `npx tsc --project "${gruntConfig.learnFrontEnd.src.ts}" --outDir "${gruntConfig.learnFrontEnd.tmp.dir}"`,