refactor: migrate react-script to vite for hello-world-bot-with tab

OfficeDev · Sep 19, 2024 · 83ad60d · 83ad60d
1 parent b511fbb
commit 83ad60d
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 30 deletions.
diff --git a/hello-world-bot-with-tab/.vscode/tasks.json b/hello-world-bot-with-tab/.vscode/tasks.json
@@ -127,7 +127,7 @@
  "background": {
  "activeOnStart": true,
  "beginsPattern": ".*",
- "endsPattern": "Compiled|Failed|compiled|failed"
+ "endsPattern": "Compiled|Failed|compiled|failed|ready"
  }
  }
  }

diff --git a/...-world-bot-with-tab/tab/public/index.html → hello-world-bot-with-tab/tab/index.html b/...-world-bot-with-tab/tab/public/index.html → hello-world-bot-with-tab/tab/index.html
@@ -2,7 +2,7 @@
  <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"
@@ -13,5 +13,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/hello-world-bot-with-tab/tab/package.json b/hello-world-bot-with-tab/tab/package.json
@@ -13,23 +13,25 @@
  "axios": "^1.6.7",
  "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": {
  "@types/node": "^14.0.0",
  "@types/react": "^18.0.0",
  "@types/react-dom": "^18.0.0",
  "@types/react-router-dom": "^5.3.3",
  "env-cmd": "^10.1.0",
- "typescript": "^4.1.2"
+ "typescript": "^4.1.2",
+ "vite": "^5.4.2",
+ "@vitejs/plugin-basic-ssl": "^1.1.0",
+ "@vitejs/plugin-react": "^4.3.1"
  },
  "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/hello-world-bot-with-tab/tab/src/components/sample/EditCode.tsx b/hello-world-bot-with-tab/tab/src/components/sample/EditCode.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 export function EditCode(props: { tabCodeEntry?: string }) {
  const { tabCodeEntry } = {
- tabCodeEntry: "tabs/src/index.tsx",
+ tabCodeEntry: "tab/src/index.tsx",
  ...props,
  };
  return (

diff --git a/hello-world-bot-with-tab/tab/tsconfig.app.json b/hello-world-bot-with-tab/tab/tsconfig.app.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/hello-world-bot-with-tab/tab/tsconfig.json b/hello-world-bot-with-tab/tab/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/hello-world-bot-with-tab/tab/tsconfig.node.json b/hello-world-bot-with-tab/tab/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/hello-world-bot-with-tab/tab/vite.config.ts b/hello-world-bot-with-tab/tab/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,
+ },
+ },
+});
diff --git a/hello-world-bot-with-tab/teamsapp.yml b/hello-world-bot-with-tab/teamsapp.yml
@@ -87,7 +87,7 @@ deploy:
  - uses: cli/runNpxCommand
  name: deploy to Azure Static Web Apps
  with:
- args: '@azure/static-web-apps-cli deploy ./tab/build -d
+ args: '@azure/static-web-apps-cli deploy ./tab/dist -d
  ${{SECRET_TAB_SWA_DEPLOYMENT_TOKEN}} --env production'
  # Deploy your application to Azure App Service using the zip deploy feature.
  # For additional details, refer to https://aka.ms/zip-deploy-to-app-services.