diff --git a/templates/js/sso-tab-with-obo-flow/.vscode/tasks.json b/templates/js/sso-tab-with-obo-flow/.vscode/tasks.json index be29f0a55a..8c69eb3fe0 100644 --- a/templates/js/sso-tab-with-obo-flow/.vscode/tasks.json +++ b/templates/js/sso-tab-with-obo-flow/.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/templates/js/sso-tab-with-obo-flow/public/index.html b/templates/js/sso-tab-with-obo-flow/index.html similarity index 81% rename from templates/js/sso-tab-with-obo-flow/public/index.html rename to templates/js/sso-tab-with-obo-flow/index.html index c61bcb4424..71e2cfb9ed 100644 --- a/templates/js/sso-tab-with-obo-flow/public/index.html +++ b/templates/js/sso-tab-with-obo-flow/index.html @@ -2,7 +2,7 @@ - +
+ diff --git a/templates/js/sso-tab-with-obo-flow/package.json.tpl b/templates/js/sso-tab-with-obo-flow/package.json.tpl index c051d7a88c..a7f23ec715 100644 --- a/templates/js/sso-tab-with-obo-flow/package.json.tpl +++ b/templates/js/sso-tab-with-obo-flow/package.json.tpl @@ -4,6 +4,7 @@ "engines": { "node": "18 || 20" }, + "type": "module", "private": true, "dependencies": { "@fluentui/react-components": "^9.18.0", @@ -13,8 +14,7 @@ "axios": "^0.21.1", "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": "^18.0.0", @@ -22,16 +22,19 @@ "@types/react-dom": "^18.0.0", "@types/react-router-dom": "^5.3.3", "concurrently": "^8.2.2", - "env-cmd": "^10.1.0" + "env-cmd": "^10.1.0", + "vite": "^5.4.2", + "@vitejs/plugin-basic-ssl": "^1.1.0", + "@vitejs/plugin-react": "^4.3.1" }, "scripts": { "dev:teamsfx": "concurrently \"npm run dev-tab:teamsfx\" \"npm run dev-api:teamsfx\"", "dev-tab:teamsfx": "env-cmd --silent -f .localConfigs npm run start", "dev-api:teamsfx": "cd api && npm run dev:teamsfx", - "start": "react-scripts start", - "build": "react-scripts build", + "start": "vite", + "build": "vite build", "test": "echo \"Error: no test specified\" && exit 1", - "eject": "react-scripts eject" + "serve": "vite preview" }, "eslintConfig": { "extends": [ diff --git a/templates/js/sso-tab-with-obo-flow/teamsapp.yml.tpl b/templates/js/sso-tab-with-obo-flow/teamsapp.yml.tpl index d4fff9c1bd..7d453c65ac 100644 --- a/templates/js/sso-tab-with-obo-flow/teamsapp.yml.tpl +++ b/templates/js/sso-tab-with-obo-flow/teamsapp.yml.tpl @@ -140,7 +140,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' # Run npm command - uses: cli/runNpmCommand name: install dependencies diff --git a/templates/js/sso-tab-with-obo-flow/vite.config.js b/templates/js/sso-tab-with-obo-flow/vite.config.js new file mode 100644 index 0000000000..3b80e97874 --- /dev/null +++ b/templates/js/sso-tab-with-obo-flow/vite.config.js @@ -0,0 +1,30 @@ +import { defineConfig, loadEnv } from "vite"; +import react from "@vitejs/plugin-react"; +import fs from "fs"; + +const cherryPickedKeys = [ + "REACT_APP_CLIENT_ID", + "REACT_APP_START_LOGIN_PAGE_URL", + "REACT_APP_FUNC_NAME", + "REACT_APP_FUNC_ENDPOINT", +]; + +export default defineConfig(({ mode }) => { + const env = loadEnv(mode, process.cwd(), ""); + const processEnv = {}; + cherryPickedKeys.forEach((key) => (processEnv[key] = env[key])); + + return { + define: { + "process.env": processEnv, + }, + 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/sso-tab-with-obo-flow/.vscode/tasks.json b/templates/ts/sso-tab-with-obo-flow/.vscode/tasks.json index 0cad6d4d44..55a8d71de1 100644 --- a/templates/ts/sso-tab-with-obo-flow/.vscode/tasks.json +++ b/templates/ts/sso-tab-with-obo-flow/.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/templates/ts/sso-tab-with-obo-flow/public/index.html b/templates/ts/sso-tab-with-obo-flow/index.html similarity index 81% rename from templates/ts/sso-tab-with-obo-flow/public/index.html rename to templates/ts/sso-tab-with-obo-flow/index.html index c61bcb4424..78655393bf 100644 --- a/templates/ts/sso-tab-with-obo-flow/public/index.html +++ b/templates/ts/sso-tab-with-obo-flow/index.html @@ -2,7 +2,7 @@ - +
+ diff --git a/templates/ts/sso-tab-with-obo-flow/package.json.tpl b/templates/ts/sso-tab-with-obo-flow/package.json.tpl index 1bd43c4728..42ac2e1446 100644 --- a/templates/ts/sso-tab-with-obo-flow/package.json.tpl +++ b/templates/ts/sso-tab-with-obo-flow/package.json.tpl @@ -4,6 +4,7 @@ "engines": { "node": "18 || 20" }, + "type": "module", "private": true, "dependencies": { "@fluentui/react-components": "^9.18.0", @@ -13,8 +14,7 @@ "axios": "^0.21.1", "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": "^18.0.0", @@ -23,16 +23,19 @@ "@types/react-router-dom": "^5.3.3", "concurrently": "^8.2.2", "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": "concurrently \"npm run dev-tab:teamsfx\" \"npm run dev-api:teamsfx\"", "dev-tab:teamsfx": "env-cmd --silent -f .localConfigs npm run start", "dev-api:teamsfx": "cd api && npm run dev:teamsfx", - "start": "react-scripts start", - "build": "react-scripts build", + "start": "vite", + "build": "tsc && vite build", "test": "echo \"Error: no test specified\" && exit 1", - "eject": "react-scripts eject" + "serve": "vite preview" }, "eslintConfig": { "extends": [ diff --git a/templates/ts/sso-tab-with-obo-flow/teamsapp.yml.tpl b/templates/ts/sso-tab-with-obo-flow/teamsapp.yml.tpl index 1cb896afea..448e96f6a3 100644 --- a/templates/ts/sso-tab-with-obo-flow/teamsapp.yml.tpl +++ b/templates/ts/sso-tab-with-obo-flow/teamsapp.yml.tpl @@ -140,7 +140,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' # Run npm command - uses: cli/runNpmCommand name: install dependencies diff --git a/templates/ts/sso-tab-with-obo-flow/tsconfig.app.json b/templates/ts/sso-tab-with-obo-flow/tsconfig.app.json new file mode 100644 index 0000000000..f0a235055d --- /dev/null +++ b/templates/ts/sso-tab-with-obo-flow/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/templates/ts/sso-tab-with-obo-flow/tsconfig.json b/templates/ts/sso-tab-with-obo-flow/tsconfig.json index 9d379a3c4a..1ffef600d9 100644 --- a/templates/ts/sso-tab-with-obo-flow/tsconfig.json +++ b/templates/ts/sso-tab-with-obo-flow/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/templates/ts/sso-tab-with-obo-flow/tsconfig.node.json b/templates/ts/sso-tab-with-obo-flow/tsconfig.node.json new file mode 100644 index 0000000000..0d3d71446a --- /dev/null +++ b/templates/ts/sso-tab-with-obo-flow/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/templates/ts/sso-tab-with-obo-flow/vite.config.ts b/templates/ts/sso-tab-with-obo-flow/vite.config.ts new file mode 100644 index 0000000000..3b80e97874 --- /dev/null +++ b/templates/ts/sso-tab-with-obo-flow/vite.config.ts @@ -0,0 +1,30 @@ +import { defineConfig, loadEnv } from "vite"; +import react from "@vitejs/plugin-react"; +import fs from "fs"; + +const cherryPickedKeys = [ + "REACT_APP_CLIENT_ID", + "REACT_APP_START_LOGIN_PAGE_URL", + "REACT_APP_FUNC_NAME", + "REACT_APP_FUNC_ENDPOINT", +]; + +export default defineConfig(({ mode }) => { + const env = loadEnv(mode, process.cwd(), ""); + const processEnv = {}; + cherryPickedKeys.forEach((key) => (processEnv[key] = env[key])); + + return { + define: { + "process.env": processEnv, + }, + 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, + }, + }, + }; +});