diff --git a/templates/js/dashboard-tab/.vscode/tasks.json b/templates/js/dashboard-tab/.vscode/tasks.json index 72413ddb7b..7272ec795e 100644 --- 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 index 2ed6dda262..79fffb69d2 100644 --- 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 b/templates/js/dashboard-tab/index.html similarity index 73% rename from templates/js/dashboard-tab/public/index.html rename to templates/js/dashboard-tab/index.html index c61bcb4424..a72c470202 100644 --- a/templates/js/dashboard-tab/public/index.html +++ b/templates/js/dashboard-tab/index.html @@ -1,17 +1,17 @@ + - + Microsoft Teams Tab - -
+ - + \ No newline at end of file diff --git a/templates/js/dashboard-tab/package.json.tpl b/templates/js/dashboard-tab/package.json.tpl index 6836dbf579..02d6fec293 100644 --- 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 new file mode 100644 index 0000000000..ef5ef2b4b0 Binary files /dev/null and b/templates/js/dashboard-tab/public/favicon.ico differ diff --git a/templates/js/dashboard-tab/src/index.css b/templates/js/dashboard-tab/src/main.css similarity index 100% rename from templates/js/dashboard-tab/src/index.css rename to templates/js/dashboard-tab/src/main.css diff --git a/templates/js/dashboard-tab/src/index.jsx b/templates/js/dashboard-tab/src/main.jsx similarity index 90% rename from templates/js/dashboard-tab/src/index.jsx rename to templates/js/dashboard-tab/src/main.jsx index 61bd0a0fb4..253d7e5f99 100644 --- a/templates/js/dashboard-tab/src/index.jsx +++ b/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 index a192ed6aa5..49577b1a85 100644 --- 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 new file mode 100644 index 0000000000..1f2556b593 --- /dev/null +++ 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 index 67a78bb0e4..d5f23aef09 100644 --- 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 index d4de71afca..b72a8cc4d6 100644 --- 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": {