OfficeDev · HuihuiWu-Microsoft · Mar 4, 2026 · Mar 4, 2026 · Mar 4, 2026
@@ -75,7 +75,7 @@
                 "background": {
                     "activeOnStart": true,
                     "beginsPattern": ".*",
-                    "endsPattern": "Compiled|Failed|compiled|failed"
+                    "endsPattern": "Compiled|Failed|compiled|failed|ready in|Local:"
                 }
             }
         }

@@ -26,7 +26,7 @@ One Productivity Hub sample shows you how to build a tab for viewing your calend
 
 ## Prerequisite to use this sample
 
-- [Node.js](https://nodejs.org/) version 16, 18
+- [Node.js](https://nodejs.org/) version 20, 22
 - A Microsoft 365 tenant in which you have permission to upload Teams apps. You can get a free Microsoft 365 developer tenant by joining the [Microsoft 365 developer program](https://developer.microsoft.com/en-us/microsoft-365/dev-program).
 - [Microsoft 365 Agents Toolkit Visual Studio Code Extension](https://aka.ms/teams-toolkit) version 5.0.0 and higher or [Microsoft 365 Agents Toolkit CLI](https://aka.ms/teams-toolkit-cli)
 

@@ -1,17 +1,18 @@
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <link
       rel="stylesheet"
       href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
     />
     <title>Microsoft Teams Tab</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>
   </body>
 </html>
@@ -2,7 +2,7 @@
   "name": "one-productivity-hub",
   "version": "0.1.0",
   "engines": {
-    "node": "16 || 18"
+    "node": "20 || 22"
   },
   "private": true,
   "dependencies": {
@@ -18,17 +18,18 @@
     "react": "^18.2.0",
     "react-csv": "^2.2.2",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.8.0",
-    "react-scripts": "^5.0.1"
+    "react-router-dom": "^6.8.0"
   },
   "devDependencies": {
-    "env-cmd": "^10.1.0"
+    "@vitejs/plugin-react": "^4.7.0",
+    "env-cmd": "^10.1.0",
+    "vite": "^6.3.6"
   },
   "scripts": {
     "dev:teamsfx": "env-cmd --silent -f .localConfigs npm run start",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "eslintConfig": {

@@ -1,6 +1,9 @@
+const env = import.meta.env;
+
 const config = {
-  initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
-  clientId: process.env.REACT_APP_CLIENT_ID,
+  initiateLoginEndpoint:
+    env.REACT_APP_START_LOGIN_PAGE_URL || env.VITE_START_LOGIN_PAGE_URL,
+  clientId: env.REACT_APP_CLIENT_ID || env.VITE_CLIENT_ID,
 };
 
 export default config;
@@ -0,0 +1,36 @@
+import fs from "node:fs";
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  const useHttps = env.HTTPS === "true";
+  const certFile = env.SSL_CRT_FILE;
+  const keyFile = env.SSL_KEY_FILE;
+
+  let https = false;
+  if (useHttps) {
+    if (certFile && keyFile && fs.existsSync(certFile) && fs.existsSync(keyFile)) {
+      https = {
+        cert: fs.readFileSync(certFile),
+        key: fs.readFileSync(keyFile),
+      };
+    } else {
+      https = true;
+    }
+  }
+
+  return {
+    plugins: [react()],
+    envPrefix: ["VITE_", "REACT_APP_"],
+    server: {
+      host: env.HOST || "localhost",
+      port: Number(env.PORT || 53000),
+      strictPort: true,
+      https,
+    },
+    build: {
+      outDir: "build",
+    },
+  };
+});