fix: migrate the dashboard tab js template to vite (#12313)

OfficeDev · Sep 2, 2024 · ca2296d · ca2296d
1 parent e6af1a7
commit ca2296d
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 25 deletions.
diff --git a/templates/js/dashboard-tab/.vscode/tasks.json b/templates/js/dashboard-tab/.vscode/tasks.json
@@ -75,7 +75,7 @@
                 "background": {
                     "activeOnStart": true,
                     "beginsPattern": ".*",
-                    "endsPattern": "Compiled|Failed|compiled|failed"
+                    "endsPattern": "Compiled|Failed|compiled|failed|ready"
                 }
             }
         }

diff --git a/templates/js/dashboard-tab/README.md b/templates/js/dashboard-tab/README.md
@@ -52,11 +52,13 @@ The following files can be customized and demonstrate an example implementation
 
 The following are project-related files. You generally will not need to customize these files.
 
-| File                       | Contents                             |
-| -------------------------- | ------------------------------------ |
-| `src/index.css`            | The style of application entry point |
-| `src/index.jsx`            | Application entry point              |
-| `src/internal/context.jsx` | TeamsFx Context                      |
+| File                       | Contents                                   |
+| -------------------------- | ------------------------------------------ |
+| `src/main.css`             | The style of React application entry point |
+| `src/main.jsx`             | The entry point for a React application    |
+| `src/internal/context.jsx` | TeamsFx Context                            |
+| `index.html`               | The entry point of the application         |
+| `vite.config.js`           | Vite configuration file                    |
 
 The following are Teams Toolkit specific project files. You can [visit a complete guide on Github](https://github.com/OfficeDev/TeamsFx/wiki/Teams-Toolkit-Visual-Studio-Code-v5-Guide#overview) to understand how Teams Toolkit works.
 

diff --git a/templates/js/dashboard-tab/public/index.html → templates/js/dashboard-tab/index.html b/templates/js/dashboard-tab/public/index.html → templates/js/dashboard-tab/index.html
@@ -1,17 +1,17 @@
+<!doctype html>
 <html lang="en">
   <head>
     <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/main.jsx"></script>
   </body>
-</html>
+</html>
diff --git a/templates/js/dashboard-tab/package.json.tpl b/templates/js/dashboard-tab/package.json.tpl
@@ -4,6 +4,7 @@
     "engines": {
         "node": "16 || 18"
     },
+    "type": "module",
     "private": true,
     "dependencies": {
         "@fluentui/react-charting": "^5.14.10",
@@ -14,17 +15,17 @@
         "@microsoft/teamsfx-react": "^3.0.0",
         "react": "^18.2.0",
         "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.3.1",
+        "env-cmd": "^10.1.0",
+        "vite": "^5.4.0"
     },
     "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",
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "eslintConfig": {

diff --git a/templates/js/dashboard-tab/public/favicon.ico b/templates/js/dashboard-tab/public/favicon.ico
diff --git a/templates/js/dashboard-tab/src/index.css → templates/js/dashboard-tab/src/main.css b/templates/js/dashboard-tab/src/index.css → templates/js/dashboard-tab/src/main.css
diff --git a/templates/js/dashboard-tab/src/index.jsx → templates/js/dashboard-tab/src/main.jsx b/templates/js/dashboard-tab/src/index.jsx → templates/js/dashboard-tab/src/main.jsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import "./main.css";
 
 import React from "react";
 import { createRoot } from "react-dom/client";

diff --git a/templates/js/dashboard-tab/teamsapp.yml.tpl b/templates/js/dashboard-tab/teamsapp.yml.tpl
@@ -91,7 +91,7 @@ deploy:
   - uses: cli/runNpmCommand
     name: install dependencies
     with:
-      args: install --production
+      args: install
   - uses: cli/runNpmCommand
     name: build app
     with:
@@ -100,7 +100,7 @@ deploy:
   - uses: cli/runNpxCommand
     name: deploy to Azure Static Web Apps
     with:
-      args: '@azure/static-web-apps-cli deploy ./build -d ${{SECRET_TAB_SWA_DEPLOYMENT_TOKEN}} --env production'
+      args: '@azure/static-web-apps-cli deploy ./dist -d ${{SECRET_TAB_SWA_DEPLOYMENT_TOKEN}} --env production'
 
 # Triggered when 'teamsapp publish' is executed
 publish:

diff --git a/templates/js/dashboard-tab/vite.config.js b/templates/js/dashboard-tab/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import fs from "fs";
+
+// https://vitejs.dev/config/
+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,
+    },
+  },
+});
diff --git a/templates/ts/dashboard-tab/README.md b/templates/ts/dashboard-tab/README.md
@@ -54,11 +54,13 @@ The following files can be customized and demonstrate an example implementation
 
 The following are project-related files. You generally will not need to customize these files.
 
-| File                      | Contents                             |
-| ------------------------- | ------------------------------------ |
-| `src/index.css`           | The style of application entry point |
-| `src/index.tsx`           | Application entry point              |
-| `src/internal/context.ts` | TeamsFx Context                      |
+| File                      | Contents                                   |
+| ------------------------- | ------------------------------------------ |
+| `src/main.css`            | The style of React application entry point |
+| `src/main.tsx`            | The entry point for a React application    |
+| `src/internal/context.ts` | TeamsFx Context                            |
+| `index.html`              | The entry point of the application         |
+| `vite.config.ts`          | Vite configuration file                    |
 
 The following are Teams Toolkit specific project files. You can [visit a complete guide on Github](https://github.com/OfficeDev/TeamsFx/wiki/Teams-Toolkit-Visual-Studio-Code-v5-Guide#overview) to understand how Teams Toolkit works.
 

diff --git a/templates/ts/dashboard-tab/package.json.tpl b/templates/ts/dashboard-tab/package.json.tpl
@@ -32,7 +32,6 @@
         "dev:teamsfx": "env-cmd --silent -f .localConfigs npm run start",
         "start": "vite",
         "build": "tsc && vite build",
-        "server": "vite preview",
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "eslintConfig": {