Merge pull request #525 from bcgov/feat/system-upgrade

Feat/system upgrade

Author: alex-struk

.eslintrc.js

@@ -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"

.github/workflows/e2e.yml

@@ -13,12 +13,12 @@ repos:
       - id: end-of-file-fixer
       - id: trailing-whitespace
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.48.0
+    rev: v9.31.0
     hooks:
       - id: eslint
         additional_dependencies:
           [
-            "eslint@8.48.0",
+            "eslint@9.31.0",
             "eslint-plugin-react",
             "@typescript-eslint/eslint-plugin",
             "typescript",
@@ -45,7 +45,7 @@ repos:
         exclude: .*/tests/.*
         additional_dependencies: ["gibberish-detector"]
   - repo: https://github.com/alessandrojcm/commitlint-pre-commit-hook
-    rev: v2.2.0
+    rev: v9.22.0
     hooks:
       - id: commitlint
         stages: [commit-msg]

.pre-commit-config.yaml

@@ -1,25 +1,25 @@
-FROM --platform=linux/amd64 docker.io/node:16.19 AS dm_app_build
+FROM --platform=linux/amd64 docker.io/node:22 AS dm_app_build
 ARG DIRPATH=/usr/app
 WORKDIR $DIRPATH
 COPY ./src $DIRPATH/src
-COPY package.json gruntfile.js yarn.lock tsconfig.json ./
+COPY package.json yarn.lock tsconfig.json vite.config.mts ./
 COPY ./lib $DIRPATH/lib
-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 && \
-    npm run back-end:build && \
+    VITE_NODE_ENV=production npm run front-end:build && \
+    npm run back-end:build:production && \
     yarn install --frozen-lockfile --production && \
     yarn cache clean && \
     rm -Rf $DIRPATH/tmp && \
     mkdir $DIRPATH/__tmp
 
-FROM --platform=linux/amd64 docker.io/node:16.19
+FROM --platform=linux/amd64 docker.io/node:22
 ARG DIRPATH=/usr/app
 WORKDIR $DIRPATH
 COPY --from=dm_app_build --chown=node $DIRPATH ./

Dockerfile

@@ -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
 

README.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 -

docker-compose.yml

@@ -7,7 +7,7 @@ It is difficult to debug/step-through front-end code so the recommendation is to
 The module aliasing (e.g. import * from "shared/...") is what throws off most debuggers and build tools. Usually `tsconfig` files are used by debuggers and you may need to create a separate tsconfig for your local environment so that the IDE knows how to run your app.
 
 ## Alternatives
-Another solution is to configure grunt to emit source maps alongside JS and just debug the JS.
+Another solution is to configure TypeScript to emit source maps alongside JS and just debug the JS.
 
 ## Front-end
 Debugging the front-end might require evaluating MSG's in the state object.
@@ -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/build-deploy/openshift.md

@@ -1,6 +1,6 @@
 # Developer Onboarding
 
-The Digital Marketplace web application has been implemented as a full stack, TypeScript web application. Its codebase has been split into three parts: back-end, front-end and shared. This repository uses grunt to implement various build tasks for both local development and hosted environments. Developers can build and run these codebases by running the scripts defined in `package.json`.
+The Digital Marketplace web application has been implemented as a full stack, TypeScript web application. Its codebase has been split into three parts: back-end, front-end and shared. This repository uses Vite and Typescript to implement various build tasks for both local development and hosted environments. Developers can build and run these codebases by running the scripts defined in `package.json`.
 
 ## Back-End Overview
 
@@ -46,19 +46,18 @@ To better understand the front-end architecture, it is recommended that develope
 
 ## Build System
 
-The front-end is built using tasks defined with Grunt. This includes:
+The front-end is built using Vite. This includes:
 
 1. Compiling the TypeScript codebase to JavaScript.
-2. Combining the JavaScript build output to a single file using Browserify.
-3. Transpiling SASS styles to CSS.
-4. Compiling EJS templates to HTML.
-5. Copying static assets to the build directory.
-6. Minifying JavaScript, CSS and HTML assets for production builds only.
-7. Compressing static assets using gzip and brotli for production builds only.
+2. Bundling JavaScript modules with Rollup.
+3. Processing CSS and SASS styles.
+4. Handling static assets and HTML templates.
+5. Minifying JavaScript, CSS and HTML assets for production builds.
+6. Compressing static assets using gzip and brotli for production builds.
 
 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 `npm run front-end:build` which builds for production with asset minification, optimization and compression.
 
 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.
 
@@ -99,9 +98,9 @@ The `npm run migrations:*` scripts in `package.json` are how developers can crea
 
 ## Build/Execution System
 
-The back-end is compiled from TypeScript to JavaScript, which is implemented as a Grunt task.
+The back-end is compiled from TypeScript to JavaScript using the TypeScript compiler directly.
 
-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 `npm run back-end:build`. To build the app for production, which involves cleaning the build directory before rebuilding, run `npm run back-end:build: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.
 
@@ -112,7 +111,7 @@ To watch for source file changes and rebuild the back-end during local developme
 | Path               | Description                                                                                          |
 | ------------------ | ---------------------------------------------------------------------------------------------------- |
 | `build/`           | Directory containing all final build artifacts. Ignored by `git`.                                    |
-| `grunt-configs/`   | Directory containing `grunt` task configurations.                                                    |
+
 | `tmp`              | Directory containing all intermediary build artifacts. Ignored by `git`.                             |
 | `.eslintrc.js`     | `eslint` configuration file for automated code linting.                                              |
 | `.prettierrc.json` | `prettierrc` configuration file for automated code formatting.                                       |

docs/local-development/debug-config.md

@@ -0,0 +1,72 @@
+import js from "@eslint/js";
+import reactPlugin from "eslint-plugin-react";
+import typescriptPlugin from "@typescript-eslint/eslint-plugin";
+import typescriptParser from "@typescript-eslint/parser";
+import cypressPlugin from "eslint-plugin-cypress";
+import globals from "globals";
+
+export default [
+  // Base ESLint recommended config
+  js.configs.recommended,
+
+  // Main configuration object
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2023,
+      sourceType: "module",
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2023
+      },
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      }
+    },
+    plugins: {
+      react: reactPlugin,
+      "@typescript-eslint": typescriptPlugin,
+      cypress: cypressPlugin
+    },
+    rules: {
+      // Include recommended rules from plugins
+      ...reactPlugin.configs.recommended.rules,
+      ...typescriptPlugin.configs.recommended.rules,
+      ...cypressPlugin.configs.recommended.rules,
+
+      // Your custom overrides
+      "no-redeclare": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "react/prop-types": "off",
+      "@typescript-eslint/no-var-requires": "off",
+      "@typescript-eslint/no-empty-function": "off",
+      "react/no-children-prop": "off",
+      "@typescript-eslint/ban-ts-comment": "warn"
+    },
+    settings: {
+      react: {
+        version: "detect"
+      }
+    }
+  },
+
+  // TypeScript-specific overrides
+  {
+    files: ["**/*.{ts,tsx}"],
+    rules: {
+      "@typescript-eslint/no-var-requires": "error",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          ignoreRestSiblings: true
+        }
+      ]
+    }
+  }
+];