chore: replace create-react-app with vite

- add vite configuration
- replace `REACT_APP_` with `VITE_` environment variables
- move index.html
- update jenkins pipeline

BREAKING CHANGE: use vite instead of cra for compiling

.env.template

@@ -1,14 +1,13 @@
 # Backend
-REACT_APP_API_URL="http://localhost:3000/api"
+VITE_API_URL="http://localhost:3000/api"
 
 # Azure - SSO
-REACT_APP_AZURE_ACTIVE_DIRECTORY_CLIENT_ID=""
-REACT_APP_AZURE_ACTIVE_DIRECTORY_TENANT_ID=""
+VITE_AZURE_ACTIVE_DIRECTORY_CLIENT_ID=""
+VITE_AZURE_ACTIVE_DIRECTORY_TENANT_ID=""
 
 # Optional for (local) development:
 
-## Advanced Configuration for Create-React-App, see: https://create-react-app.dev/docs/advanced-configuration
-# Opens Browser, e.g. "brave", "chrome" or "edge"
-# BROWSER="/mnt/c/Program\ Files\ \(x86\)/BraveSoftware/Brave-Browser/Application/brave.exe"
-# Prevents a conflict with a local running backend, which use port 3000 as well
+# Opens Browser, e.g. "brave", "chrome" or "edge": https://vitejs.dev/config/#server-open
+# BROWSER="brave"
+# Use default port from ionic, see: https://vitejs.dev/config/#server-port
 PORT=8100

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 /docker/build
 
 # misc

Jenkinsfile

@@ -125,11 +125,6 @@ def stageDebug(def context) {
       script: 'printenv | sort',
     )
   }
-  stage('DEBUG: Context') {
-      echo "context.environment: ${context.environment}"
-      echo "context.targetProject: ${context.targetProject}"
-      echo "context.triggeredByOrchestrationPipeline: ${context.triggeredByOrchestrationPipeline}"
-  }
 }
 
 def stageInstallDependency(def context) {
@@ -245,13 +240,11 @@ def stageTest(def context) {
 def stageBuild(def context) {
   stage('Build') {
     withEnv([
-      "DISABLE_ESLINT_PLUGIN=true", // ESLint rules already checked in 'stageAnalyzeCode'; no need to double check
-      "GENERATE_SOURCEMAP=false", // Nothing in place to take advantage of sourcemaps; no need to generate one
-      "REACT_APP_VERSION=${APP_VERSION}",
+      "VITE_VERSION=${APP_VERSION}",
     ]) {
       sh(
         label: 'Build App as a static web application for production',
-        script: 'npx ionic build',
+        script: 'npm run build',
       )
     }
   }
@@ -266,6 +259,11 @@ def stageDeploy(def context) {
   }
 }
 
+/**
+  * This is a wild mix of fake test results which have come together through several attempts from error messages and test
+  * results to be able to perform a rollout for the workaround type 'ods-infra' with and without the release manager.
+  * Of course, the test cases should be replaced by correct test results.
+  */
 def stageWorkaroundFakeTest(def context) {
   stage('Fake Test Results') {
     sh(

chart/templates/deployment.yaml

@@ -17,11 +17,11 @@ spec:
     spec:
       containers:
       - env:
-        - name: REACT_APP_API_URL
-          value: {{ .Values.reactAppApiUrl }}
-        - name: REACT_APP_AZURE_ACTIVE_DIRECTORY_CLIENT_ID
+        - name: VITE_API_URL
+          value: {{ .Values.apiUrl }}
+        - name: VITE_AZURE_ACTIVE_DIRECTORY_CLIENT_ID
           value: {{ .Values.azureActiveDirectoryClientId }}
-        - name: REACT_APP_AZURE_ACTIVE_DIRECTORY_TENANT_ID
+        - name: VITE_AZURE_ACTIVE_DIRECTORY_TENANT_ID
           value: {{ .Values.azureActiveDirectoryTenantId }}
         image: "default-route-openshift-image-registry.apps.OPENSHIFT_DOMAIN_DEV/PROJECTID-cd/{{ include "chart.name" . }}:{{ .Values.imageTag }}"
         imagePullPolicy: Always

chart/values.dev.yaml

@@ -1,5 +1,5 @@
 azureActiveDirectoryClientId: '11111111-2222-3333-4444-555555555555'
 azureActiveDirectoryTenantId: 'aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee'
 
-# reactAppApiUrl is the backend api url
-reactAppApiUrl: 'http://localhost:3000/api'
+# apiUrl is the backend api url
+apiUrl: 'http://localhost:3000/api'

chart/values.prod.yaml

@@ -1,5 +1,5 @@
 azureActiveDirectoryClientId: '11111111-2222-3333-4444-555555555555'
 azureActiveDirectoryTenantId: 'aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee'
 
-# reactAppApiUrl is the backend api url
-reactAppApiUrl: 'http://localhost:3000/api'
+# apiUrl is the backend api url
+apiUrl: 'http://localhost:3000/api'

chart/values.test.yaml

@@ -1,5 +1,5 @@
 azureActiveDirectoryClientId: '11111111-2222-3333-4444-555555555555'
 azureActiveDirectoryTenantId: 'aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee'
 
-# reactAppApiUrl is the backend api url
-reactAppApiUrl: 'http://localhost:3000/api'
+# apiUrl is the backend api url
+apiUrl: 'http://localhost:3000/api'

docker/nginx-inject-env.sh

@@ -1,15 +1,15 @@
 #!/usr/bin/env sh
 set -e
 
-ENV_PREFIX=REACT_APP_
+ENV_PREFIX=VITE_
 INJECT_FILE_PATH="/usr/share/nginx/html/inject.js"
 
 # Using environment variables in nginx configuration
 # See: https://github.com/docker-library/docs/tree/master/nginx#using-environment-variables-in-nginx-configuration-new-in-119
-envsubst '${REACT_APP_API_URL}' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/nginx.conf
+envsubst '${VITE_API_URL}' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/nginx.conf
 
 # Update environment variables to use nginx api gateway
-REACT_APP_API_URL="/api"
+VITE_API_URL="/api"
 
 echo "window.injectedEnv = {" > "${INJECT_FILE_PATH}"
 

docker/nginx.conf

@@ -76,7 +76,7 @@ http {
         location /api {
           # Workaround to let nginx start even if node-api is not reachable (yet)
           # See: https://sandro-keil.de/blog/let-nginx-start-if-upstream-host-is-unavailable-or-down/
-          set $nodeapi ${REACT_APP_API_URL};
+          set $nodeapi ${VITE_API_URL};
 
           proxy_buffer_size     16k; # 16k of buffers from pool used for headers
           proxy_buffers         8 16k; # Buffer pool = 8 buffers of 16k

public/index.html → index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>COMPONENTID</title>
+    <title>App</title>
 
     <base href="/" />
 
@@ -14,17 +14,17 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="msapplication-tap-highlight" content="no" />
 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
+    <link rel="manifest" href="/manifest.webmanifest" />
 
     <link
       rel="shortcut icon"
       type="image/svg+xml"
-      href="data:image/svg+xml,%3Csvg fill='%23003366' role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EPROJECTID-icon%3C/title%3E%3Cpath d='M22.922 7.027l-.103-.23-.169.188c-.408.464-.928.82-1.505 1.036l-.159.061.066.155a9.745 9.745 0 0 1 .75 3.759c0 5.405-4.397 9.806-9.806 9.806-5.409 0-9.802-4.397-9.802-9.802 0-5.405 4.402-9.806 9.806-9.806 1.467 0 2.883.319 4.2.947l.155.075.066-.155a3.767 3.767 0 0 1 1.106-1.453l.197-.159-.225-.117A11.905 11.905 0 0 0 12.001.001c-6.619 0-12 5.381-12 12s5.381 12 12 12 12-5.381 12-12c0-1.73-.361-3.403-1.078-4.973zM12 6.53A5.476 5.476 0 0 0 6.53 12 5.476 5.476 0 0 0 12 17.47 5.476 5.476 0 0 0 17.47 12 5.479 5.479 0 0 0 12 6.53zm10.345-2.007a2.494 2.494 0 1 1-4.988 0 2.494 2.494 0 0 1 4.988 0z'/%3E%3C/svg%3E"
+      href="data:image/svg+xml,%3Csvg fill='%23003366' role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EIonic%3C/title%3E%3Cpath d='M22.922 7.027l-.103-.23-.169.188c-.408.464-.928.82-1.505 1.036l-.159.061.066.155a9.745 9.745 0 0 1 .75 3.759c0 5.405-4.397 9.806-9.806 9.806-5.409 0-9.802-4.397-9.802-9.802 0-5.405 4.402-9.806 9.806-9.806 1.467 0 2.883.319 4.2.947l.155.075.066-.155a3.767 3.767 0 0 1 1.106-1.453l.197-.159-.225-.117A11.905 11.905 0 0 0 12.001.001c-6.619 0-12 5.381-12 12s5.381 12 12 12 12-5.381 12-12c0-1.73-.361-3.403-1.078-4.973zM12 6.53A5.476 5.476 0 0 0 6.53 12 5.476 5.476 0 0 0 12 17.47 5.476 5.476 0 0 0 17.47 12 5.479 5.479 0 0 0 12 6.53zm10.345-2.007a2.494 2.494 0 1 1-4.988 0 2.494 2.494 0 0 1 4.988 0z'/%3E%3C/svg%3E"
     />
 
     <!-- add to homescreen for ios -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-title" content="COMPONENTID" />
+    <meta name="apple-mobile-web-app-title" content="app" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 
     <!-- Provide runtime variables to the client. -->
@@ -33,5 +33,6 @@
 
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

src/auth.ts

@@ -18,8 +18,8 @@ export const REDIRECT_REQUEST: RedirectRequest = {
 // see: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/master/lib/msal-browser/docs/configuration.md
 const MSAL_CONFIG: Configuration = {
   auth: {
-    authority: `https://login.microsoftonline.com/${env.REACT_APP_AZURE_ACTIVE_DIRECTORY_TENANT_ID}`,
-    clientId: env.REACT_APP_AZURE_ACTIVE_DIRECTORY_CLIENT_ID,
+    authority: `https://login.microsoftonline.com/${env.VITE_AZURE_ACTIVE_DIRECTORY_TENANT_ID}`,
+    clientId: env.VITE_AZURE_ACTIVE_DIRECTORY_CLIENT_ID,
     navigateToLoginRequestUrl: false,
     postLogoutRedirectUri: '/logout',
     redirectUri: '/',

src/components/Base/Item/ItemAppVersion.tsx

@@ -4,7 +4,7 @@ import { env } from '../../../config';
 export const ItemAppVersion: React.FC<TProps> = (props) => {
   return (
     <IonItem {...props}>
-      <IonLabel>Version: {env.REACT_APP_VERSION}</IonLabel>
+      <IonLabel>Version: {env.VITE_VERSION}</IonLabel>
     </IonItem>
   );
 };

src/config.ts

@@ -1,10 +1,10 @@
 import packageJson from '../package.json';
 
 const processEnv = {
-  REACT_APP_API_URL: process.env.REACT_APP_API_URL || 'http://localhost:3000/api',
-  REACT_APP_AZURE_ACTIVE_DIRECTORY_CLIENT_ID: process.env.REACT_APP_AZURE_ACTIVE_DIRECTORY_CLIENT_ID || '',
-  REACT_APP_AZURE_ACTIVE_DIRECTORY_TENANT_ID: process.env.REACT_APP_AZURE_ACTIVE_DIRECTORY_TENANT_ID || '',
-  REACT_APP_VERSION: process.env.REACT_APP_VERSION || packageJson.version || '1.0.0',
+  VITE_API_URL: import.meta.env.VITE_API_URL || 'http://localhost:3000/api',
+  VITE_AZURE_ACTIVE_DIRECTORY_CLIENT_ID: import.meta.env.VITE_AZURE_ACTIVE_DIRECTORY_CLIENT_ID || '',
+  VITE_AZURE_ACTIVE_DIRECTORY_TENANT_ID: import.meta.env.VITE_AZURE_ACTIVE_DIRECTORY_TENANT_ID || '',
+  VITE_VERSION: import.meta.env.VITE_VERSION || packageJson.version || '1.0.0',
 };
 
 const injectedEnv = window.injectedEnv || {};

src/service-worker-registration.ts

@@ -25,9 +25,9 @@ type Config = {
 };
 
 export function register(config?: Config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+  if (import.meta.env.PROD && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    const publicUrl = new URL(import.meta.env.PUBLIC_URL, window.location.href);
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
@@ -36,7 +36,7 @@ export function register(config?: Config) {
     }
 
     window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      const swUrl = `${import.meta.env.PUBLIC_URL}/service-worker.js`;
 
       if (isLocalhost) {
         // This is running on localhost. Let's check if a service worker still exists or not.

src/service-worker.ts

@@ -50,7 +50,7 @@ registerRoute(
     // Return true to signal that we want to use the handler.
     return true;
   },
-  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+  createHandlerBoundToURL(import.meta.env.PUBLIC_URL + '/index.html')
 );
 
 // An example runtime caching route for requests that aren't handled by the

src/services/rtkQueryErrorHandler.ts

@@ -7,7 +7,7 @@ export const rtkQueryErrorHandler: Middleware = (_api: MiddlewareAPI) => (next)
     return next(action);
   }
 
-  if (process.env.NODE_ENV === 'development') {
+  if (import.meta.env.DEV) {
     // eslint-disable-next-line no-console
     console.error(action);
   }

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.json

@@ -1,20 +1,21 @@
 {
   "compilerOptions": {
-    "target": "ES2021",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
+    "allowJs": false,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
+    "esModuleInterop": false,
     "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
     "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "noEmit": true,
-    "jsx": "react-jsx"
+    "resolveJsonModule": true,
+    "skipLibCheck": false,
+    "strict": true,
+    "target": "ESNext",
+    "types": ["vite/client"],
+    "useDefineForClassFields": true
   },
-  "include": ["src"]
+  "include": ["src", "src/vite-env.d.ts"]
 }

vite.config.ts

@@ -0,0 +1,19 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig, loadEnv } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  // Load env file based on `mode` in the current working directory.
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '') };
+
+  return {
+    build: {
+      outDir: 'build',
+    },
+    plugins: [react()],
+    server: {
+      open: Boolean(process.env.BROWSER),
+      port: Number(process.env.PORT) ?? 5173,
+    },
+  };
+});