OfficeDev · Yimin-Jin · Nov 4, 2024 · Nov 4, 2024 · Nov 4, 2024
diff --git a/intelligent-data-chart-generator/.vscode/tasks.json b/intelligent-data-chart-generator/.vscode/tasks.json
@@ -78,7 +78,7 @@
                 "background": {
                     "activeOnStart": true,
                     "beginsPattern": ".*",
-                    "endsPattern": "Compiled|Failed|compiled|failed"
+                    "endsPattern": "Compiled|Failed|compiled|failed|ready"
                 }
             }
         },

diff --git a/intelligent-data-chart-generator/api/tsconfig.json b/intelligent-data-chart-generator/api/tsconfig.json
@@ -10,6 +10,8 @@
     "resolveJsonModule": true,
     "typeRoots": [
       "./node_modules/@types"
-    ]
+    ],
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "nodenext",
   }
 }
diff --git a/...nt-data-chart-generator/public/index.html → intelligent-data-chart-generator/index.html b/...nt-data-chart-generator/public/index.html → intelligent-data-chart-generator/index.html
@@ -5,7 +5,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, shrink-to-fit=no,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
     />
-    <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"
@@ -16,5 +16,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/intelligent-data-chart-generator/package.json b/intelligent-data-chart-generator/package.json
@@ -2,8 +2,9 @@
   "name": "intelligent-data-chart-generator",
   "version": "0.1.0",
   "engines": {
-    "node": "18"
+    "node": "18 || 20"
   },
+  "type": "module",
   "private": true,
   "dependencies": {
     "@fluentui/react": "^8.114.2",
@@ -17,24 +18,26 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1",
-    "react-scripts": "^5.0.1",
     "recharts": "^2.10.4"
   },
   "devDependencies": {
     "@types/node": "^18.15.3",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "@vitejs/plugin-react": "^4.3.3",
     "cross-env": "^7.0.3",
     "env-cmd": "^10.1.0",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "vite": "^5.4.10"
   },
   "scripts": {
     "dev:teamsfx": "env-cmd --silent -f .localConfigs npm run start",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "eject": "react-scripts eject",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "vite",
+    "build": "tsc && vite build",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "serve": "vite preview"
   },
   "eslintConfig": {
     "extends": [

diff --git a/intelligent-data-chart-generator/src/App.tsx b/intelligent-data-chart-generator/src/App.tsx
@@ -22,8 +22,8 @@ import Tab from "./Tab";
 
 export default function App() {
   const { loading, themeString } = useTeamsUserCredential({
-    initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL!,
-    clientId: process.env.REACT_APP_CLIENT_ID!,
+    initiateLoginEndpoint: import.meta.env.VITE_APP_START_LOGIN_PAGE_URL!,
+    clientId: import.meta.env.VITE_APP_CLIENT_ID!,
   });
   useEffect(() => {
     loading &&

diff --git a/intelligent-data-chart-generator/src/internal/singletonContext.ts b/intelligent-data-chart-generator/src/internal/singletonContext.ts
@@ -41,8 +41,8 @@ export class TeamsUserCredentialContext {
   public getCredential() {
     if (!this.credential) {
       this.credential = new TeamsUserCredential({
-        initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL!,
-        clientId: process.env.REACT_APP_CLIENT_ID!,
+        initiateLoginEndpoint: import.meta.env.VITE_APP_START_LOGIN_PAGE_URL!,
+        clientId: import.meta.env.VITE_APP_CLIENT_ID!,
       });
     }
     return this.credential;

diff --git a/intelligent-data-chart-generator/src/services/callFunction.ts b/intelligent-data-chart-generator/src/services/callFunction.ts
@@ -28,7 +28,7 @@ export async function callFunction(
 
   try {
     // Construct the base URL for the Azure Function API
-    const apiBaseUrl = process.env.REACT_APP_FUNC_ENDPOINT + "/api/";
+    const apiBaseUrl = import.meta.env.VITE_APP_FUNC_ENDPOINT + "/api/";
 
     // Create an Axios instance which uses BearerTokenAuthProvider to inject token to request header
     const apiClient = createApiClient(

diff --git a/intelligent-data-chart-generator/teamsapp.local.yml b/intelligent-data-chart-generator/teamsapp.local.yml
@@ -101,10 +101,10 @@ deploy:
         TEAMS_APP_ID: ${{TEAMS_APP_ID}}
         SSL_CRT_FILE: ${{SSL_CRT_FILE}}
         SSL_KEY_FILE: ${{SSL_KEY_FILE}}
-        REACT_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}}
-        REACT_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html
-        REACT_APP_FUNC_NAME: ${{FUNC_NAME}}
-        REACT_APP_FUNC_ENDPOINT: ${{FUNC_ENDPOINT}}
+        VITE_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}}
+        VITE_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html
+        VITE_APP_FUNC_NAME: ${{FUNC_NAME}}
+        VITE_APP_FUNC_ENDPOINT: ${{FUNC_ENDPOINT}}
 
   # Generate runtime environment variables for backend
   - uses: file/createOrUpdateEnvironmentFile

diff --git a/intelligent-data-chart-generator/teamsapp.yml b/intelligent-data-chart-generator/teamsapp.yml
@@ -89,17 +89,17 @@ deploy:
   - uses: cli/runNpmCommand
     env:
       TEAMS_APP_ID: ${{TEAMS_APP_ID}}
-      REACT_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}}
-      REACT_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html
-      REACT_APP_FUNC_NAME: callService
-      REACT_APP_FUNC_ENDPOINT: ${{API_FUNCTION_ENDPOINT}}
+      VITE_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}}
+      VITE_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html
+      VITE_APP_FUNC_NAME: callService
+      VITE_APP_FUNC_ENDPOINT: ${{API_FUNCTION_ENDPOINT}}
     with:
       args: run build --if-present
   # Deploy bits to Azure Static Web Apps
   - uses: cli/runNpxCommand
     name: deploy to Azure Static Web Apps
     with:
-      args: '@azure/static-web-apps-cli deploy ./build -d
+      args: '@azure/static-web-apps-cli deploy ./dist -d
         ${{SECRET_TAB_SWA_DEPLOYMENT_TOKEN}} --env production'
   # Run npm command
   - uses: cli/runNpmCommand

diff --git a/intelligent-data-chart-generator/tsconfig.app.json b/intelligent-data-chart-generator/tsconfig.app.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}
diff --git a/intelligent-data-chart-generator/tsconfig.json b/intelligent-data-chart-generator/tsconfig.json
@@ -1,20 +1,7 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src"]
-}
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/intelligent-data-chart-generator/tsconfig.node.json b/intelligent-data-chart-generator/tsconfig.node.json
@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+      "target": "ES2022",
+      "lib": ["ES2023"],
+      "module": "ESNext",
+      "skipLibCheck": true,
+
+      /* Bundler mode */
+      "moduleResolution": "bundler",
+      "allowImportingTsExtensions": true,
+      "isolatedModules": true,
+      "moduleDetection": "force",
+      "noEmit": true,
+
+      /* Linting */
+      "strict": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true,
+      "noFallthroughCasesInSwitch": true
+    },
+    "include": ["vite.config.ts"]
+  }
diff --git a/intelligent-data-chart-generator/vite.config.ts b/intelligent-data-chart-generator/vite.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import fs from "fs";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 53000,
+    https: {
+      cert: process.env.SSL_CRT_FILE ? fs.readFileSync(process.env.SSL_CRT_FILE) : undefined,
+      key: process.env.SSL_KEY_FILE ? fs.readFileSync(process.env.SSL_KEY_FILE) : undefined,
+    },
+  },
+})