IBM · mayuka-c · Mar 11, 2026 · Feb 18, 2026 · Mar 2, 2026 · Mar 10, 2026
diff --git a/web/public/index.html → web/index.html b/web/public/index.html → web/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="A self-service portal for accessing Power Hardware resources, enabling seamless development, testing, and optimization on Power Architecture."
     />
-    <script src="%PUBLIC_URL%/env-config.js"></script>
+    <script src="/env-config.js"></script>
     <script
       src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"
       crossorigin
@@ -28,26 +28,17 @@
     <script>
       var Alert = ReactBootstrap.Alert;
     </script>
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       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" />
     <title>IBM&reg; Power&reg; Access Cloud</title>
   </head>
   <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.

diff --git a/web/package.json b/web/package.json
@@ -11,7 +11,6 @@
     "axios": "^1.13.5",
     "bootstrap": "^5.3.0",
     "env-cmd": "^10.1.0",
-    "http-proxy-middleware": "^2.0.9",
     "keycloak-js": "^26.2.0",
     "marked": "^9.1.0",
     "react": "^18.2.0",
@@ -23,18 +22,16 @@
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.2",
-    "sass": "^1.63.4",
-    "web-vitals": "^2.1.4"
+    "sass": "^1.63.4"
   },
   "devDependencies": {
-    "react-scripts": "5.0.1"
+    "@vitejs/plugin-react": "^5.1.4",
+    "vite": "^7.3.1"
   },
   "scripts": {
-    "dev": "chmod +x ./env.sh && ./env.sh && cp env-config.js ./public/ && react-scripts start",
-    "start": "env-cmd react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "chmod +x ./env.sh && ./env.sh && cp env-config.js ./public/ && vite",
+    "start": "env-cmd vite",
+    "build": "vite build"
   },
   "eslintConfig": {
     "extends": [
@@ -53,15 +50,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "resolutions": {
-    "nth-check": "^2.0.1",
-    "rollup": "^2.79.2",
-    "ws": "^7.5.10",
-    "path-to-regexp": "^0.1.12",
-    "body-parser": "^1.20.3",
-    "braces": "^3.0.3",
-    "postcss": "^8.4.31",
-    "form-data": "^3.0.4"
   }
 }
diff --git a/web/src/index.js → web/src/index.jsx b/web/src/index.js → web/src/index.jsx
@@ -3,7 +3,6 @@ import ReactDOM from "react-dom/client";
 import {BrowserRouter} from "react-router-dom" 
 import "./index.scss";
 import App from "./components/App";
-import reportWebVitals from "./reportWebVitals";
 import UserService from "./services/UserService";
 import { Provider } from "react-redux";
 import { store } from "./store/store";
@@ -30,8 +29,3 @@ const handleInitError = (error) => {
 };
 
 UserService.initKeycloak(renderApp, handleInitError);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/web/src/reportWebVitals.js b/web/src/reportWebVitals.js
diff --git a/web/src/setupProxy.js b/web/src/setupProxy.js
diff --git a/web/vite.config.js b/web/vite.config.js
@@ -0,0 +1,24 @@
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+  const proxyTarget = env.VITE_PAC_GO_SERVER_TARGET || env.REACT_APP_PAC_GO_SERVER_TARGET || "http://localhost:8000";
+
+  return {
+    plugins: [react()],
+    build: {
+      outDir: "build",
+    },
+    server: {
+      port: 3000,
+      proxy: {
+        "/pac-go-server": {
+          target: proxyTarget,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/pac-go-server/, '/api/v1'),
+        }
+      },
+    },
+  };
+});