diff --git a/intelligent-data-chart-generator/.vscode/tasks.json b/intelligent-data-chart-generator/.vscode/tasks.json index e6cc3599..40ed38eb 100644 --- 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 index a554c5cc..3cae9e87 100644 --- 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", } } \ No newline at end of file diff --git a/intelligent-data-chart-generator/public/index.html b/intelligent-data-chart-generator/index.html similarity index 84% rename from intelligent-data-chart-generator/public/index.html rename to intelligent-data-chart-generator/index.html index dfda043a..78481f62 100644 --- a/intelligent-data-chart-generator/public/index.html +++ b/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" /> - +
+ diff --git a/intelligent-data-chart-generator/package.json b/intelligent-data-chart-generator/package.json index 966254a3..5dcea197 100644 --- 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,7 +18,6 @@ "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": { @@ -25,16 +25,19 @@ "@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 index 3be75a4d..e70ccee6 100644 --- 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 index ba61d721..11ea680b 100644 --- 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 index 01346c7a..e5342ba7 100644 --- 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 index 537d5f3e..f14dc55e 100644 --- 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 index 029ae0d7..1dff94f4 100644 --- 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 new file mode 100644 index 00000000..9d379a3c --- /dev/null +++ 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 index 9d379a3c..c452f432 100644 --- 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" } + ] +} \ No newline at end of file diff --git a/intelligent-data-chart-generator/tsconfig.node.json b/intelligent-data-chart-generator/tsconfig.node.json new file mode 100644 index 00000000..87d6a4fe --- /dev/null +++ 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"] + } \ No newline at end of file diff --git a/intelligent-data-chart-generator/vite.config.ts b/intelligent-data-chart-generator/vite.config.ts new file mode 100644 index 00000000..c2c269f4 --- /dev/null +++ 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, + }, + }, +}) \ No newline at end of file