{this.state.data?.content}
;
+ }
+
+ override footer(): JSX.Element | undefined {
+ return ;
+ }
+}
+```
+
+### Step 4: Add the widget to the dashboard
+
+Open the `src/dashboards/SampleDashboard.tsx` file and add the widget to the implementation of the `layout` method. If you want to create a new dashboard, please refer to [How to add a new dashboard](https://aka.ms/teamsfx-dashboard-new#how-to-add-a-new-dashboard).
+
+```tsx
+override layout(): JSX.Element | undefined {
+ return (
+ <>
+
+
+
+ );
+}
+```
+
+Congratulations, you've just added your own widget! To learn more about the dashboard template, [visit the documentation](https://aka.ms/teamsfx-dashboard-new). You can find more scenarios like:
+
+- [Customize the widget](https://aka.ms/teamsfx-dashboard-new#customize-the-widget)
+- [Customize the dashboard layout](https://aka.ms/teamsfx-dashboard-new#customize-the-dashboard-layout)
+- [Create a data loader](https://aka.ms/teamsfx-dashboard-new#how-to-include-a-data-loader)
+- [Refresh data based on the schedule](https://aka.ms/teamsfx-dashboard-new#how-to-refresh-data-as-scheduled)
+- [Handle empty state](https://aka.ms/teamsfx-dashboard-new#how-to-handle-empty-state)
+- [Add a new dashboard](https://aka.ms/teamsfx-dashboard-new#how-to-add-a-new-dashboard)
+- [Use Microsoft Graph Toolkit as widget content](https://aka.ms/teamsfx-dashboard-new#how-to-use-microsoft-graph-toolkit-as-widget-content)
+- [Embed Power BI to dashboard](https://aka.ms/teamsfx-dashboard-new#how-to-embed-power-bi-to-dashboard)
+- [How to add a new Graph API call](https://aka.ms/teamsfx-dashboard-new#how-to-add-a-new-graph-api-call)
+- [Enable the app for multi-tenant](https://github.com/OfficeDev/TeamsFx/wiki/Multi-tenancy-Support-for-Azure-AD-app)
+- [Preview the app on mobile clients](https://aka.ms/teamsfx-mobile)
+
+## Additional resources
+
+- [Fluent UI](https://react.fluentui.dev/?path=/docs/concepts-introduction--page)
+- [Fluent UI React Charting Example](https://fluentuipr.z22.web.core.windows.net/heads/master/react-charting/demo/index.html#/)
diff --git a/templates/dashboard-tab-ts/appPackage/color.png b/templates/dashboard-tab-ts/appPackage/color.png
new file mode 100644
index 00000000..01aa37e3
Binary files /dev/null and b/templates/dashboard-tab-ts/appPackage/color.png differ
diff --git a/templates/dashboard-tab-ts/appPackage/manifest.json b/templates/dashboard-tab-ts/appPackage/manifest.json
new file mode 100644
index 00000000..5754a0a1
--- /dev/null
+++ b/templates/dashboard-tab-ts/appPackage/manifest.json
@@ -0,0 +1,48 @@
+{
+ "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.17/MicrosoftTeams.schema.json",
+ "manifestVersion": "1.17",
+ "version": "1.0.0",
+ "id": "${{TEAMS_APP_ID}}",
+ "developer": {
+ "name": "Teams App, Inc.",
+ "websiteUrl": "${{TAB_ENDPOINT}}",
+ "privacyUrl": "${{TAB_ENDPOINT}}/index.html#/privacy",
+ "termsOfUseUrl": "${{TAB_ENDPOINT}}/index.html#/termsofuse"
+ },
+ "icons": {
+ "color": "color.png",
+ "outline": "outline.png"
+ },
+ "name": {
+ "short": "dashboard-tab-ts${{APP_NAME_SUFFIX}}",
+ "full": "Full name for dashboard-tab-ts"
+ },
+ "description": {
+ "short": "Short description of dashboard-tab-ts",
+ "full": "Full description of dashboard-tab-ts"
+ },
+ "accentColor": "#FFFFFF",
+ "bots": [],
+ "composeExtensions": [],
+ "configurableTabs": [],
+ "staticTabs": [
+ {
+ "entityId": "index0",
+ "name": "Dashboard",
+ "contentUrl": "${{TAB_ENDPOINT}}/index.html#/tab",
+ "websiteUrl": "${{TAB_ENDPOINT}}/index.html#/tab",
+ "scopes": [
+ "personal",
+ "groupChat",
+ "team"
+ ]
+ }
+ ],
+ "permissions": [
+ "identity",
+ "messageTeamMembers"
+ ],
+ "validDomains": [
+ "${{TAB_DOMAIN}}"
+ ]
+}
\ No newline at end of file
diff --git a/templates/dashboard-tab-ts/appPackage/outline.png b/templates/dashboard-tab-ts/appPackage/outline.png
new file mode 100644
index 00000000..f7a4c864
Binary files /dev/null and b/templates/dashboard-tab-ts/appPackage/outline.png differ
diff --git a/templates/dashboard-tab-ts/env/.env.dev b/templates/dashboard-tab-ts/env/.env.dev
new file mode 100644
index 00000000..dbd3838d
--- /dev/null
+++ b/templates/dashboard-tab-ts/env/.env.dev
@@ -0,0 +1,14 @@
+# This file includes environment variables that will be committed to git by default.
+
+# Built-in environment variables
+TEAMSFX_ENV=dev
+APP_NAME_SUFFIX=dev
+
+# Updating AZURE_SUBSCRIPTION_ID or AZURE_RESOURCE_GROUP_NAME after provision may also require an update to RESOURCE_SUFFIX, because some services require a globally unique name across subscriptions/resource groups.
+AZURE_SUBSCRIPTION_ID=
+AZURE_RESOURCE_GROUP_NAME=
+RESOURCE_SUFFIX=
+
+# Generated during provision, you can also add your own variables.
+TEAMS_APP_ID=
+TAB_ENDPOINT=
diff --git a/templates/dashboard-tab-ts/infra/azure.bicep b/templates/dashboard-tab-ts/infra/azure.bicep
new file mode 100644
index 00000000..7c2375e7
--- /dev/null
+++ b/templates/dashboard-tab-ts/infra/azure.bicep
@@ -0,0 +1,24 @@
+@maxLength(20)
+@minLength(4)
+param resourceBaseName string
+param staticWebAppSku string
+param staticWebAppName string = resourceBaseName
+
+// Azure Static Web Apps that hosts your static web site
+resource swa 'Microsoft.Web/staticSites@2022-09-01' = {
+ name: staticWebAppName
+ // SWA do not need location setting
+ location: 'centralus'
+ sku: {
+ name: staticWebAppSku
+ tier: staticWebAppSku
+ }
+ properties:{}
+}
+
+var siteDomain = swa.properties.defaultHostname
+
+// The output will be persisted in .env.{envName}. Visit https://aka.ms/teamsfx-actions/arm-deploy for more details.
+output AZURE_STATIC_WEB_APPS_RESOURCE_ID string = swa.id
+output TAB_DOMAIN string = siteDomain
+output TAB_ENDPOINT string = 'https://${siteDomain}'
diff --git a/templates/dashboard-tab-ts/infra/azure.parameters.json b/templates/dashboard-tab-ts/infra/azure.parameters.json
new file mode 100644
index 00000000..0a6927bc
--- /dev/null
+++ b/templates/dashboard-tab-ts/infra/azure.parameters.json
@@ -0,0 +1,12 @@
+{
+ "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
+ "contentVersion": "1.0.0.0",
+ "parameters": {
+ "resourceBaseName": {
+ "value": "tab${{RESOURCE_SUFFIX}}"
+ },
+ "staticWebAppSku": {
+ "value": "Free"
+ }
+ }
+ }
\ No newline at end of file
diff --git a/templates/dashboard-tab-ts/package.json b/templates/dashboard-tab-ts/package.json
new file mode 100644
index 00000000..23455026
--- /dev/null
+++ b/templates/dashboard-tab-ts/package.json
@@ -0,0 +1,54 @@
+{
+ "name": "dashboardtabts",
+ "version": "0.1.0",
+ "engines": {
+ "node": "16 || 18"
+ },
+ "private": true,
+ "dependencies": {
+ "@fluentui/react-charting": "^5.14.10",
+ "@fluentui/react-components": "^9.18.0",
+ "@fluentui/react-icons": "^2.0.186",
+ "@microsoft/teams-js": "^2.19.0",
+ "@microsoft/teamsfx": "^2.2.0",
+ "@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"
+ },
+ "devDependencies": {
+ "@types/node": "^18.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"
+ },
+ "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"
+ },
+ "eslintConfig": {
+ "extends": [
+ "react-app",
+ "react-app/jest"
+ ]
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ },
+ "homepage": "."
+}
\ No newline at end of file
diff --git a/templates/dashboard-tab-ts/public/index.html b/templates/dashboard-tab-ts/public/index.html
new file mode 100644
index 00000000..c61bcb44
--- /dev/null
+++ b/templates/dashboard-tab-ts/public/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Privacy;
diff --git a/templates/dashboard-tab-ts/src/TermsOfUse.tsx b/templates/dashboard-tab-ts/src/TermsOfUse.tsx
new file mode 100644
index 00000000..f3a5c10a
--- /dev/null
+++ b/templates/dashboard-tab-ts/src/TermsOfUse.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+/**
+ * This component is used to display the required
+ * terms of use statement which can be found in a
+ * link in the about tab.
+ */
+class TermsOfUse extends React.Component {
+ render() {
+ return (
+ Privacy Statement
+
+
+ );
+ }
+}
+
+export default TermsOfUse;
diff --git a/templates/dashboard-tab-ts/src/dashboards/SampleDashboard.tsx b/templates/dashboard-tab-ts/src/dashboards/SampleDashboard.tsx
new file mode 100644
index 00000000..29d55383
--- /dev/null
+++ b/templates/dashboard-tab-ts/src/dashboards/SampleDashboard.tsx
@@ -0,0 +1,15 @@
+import { BaseDashboard } from "@microsoft/teamsfx-react";
+
+import ChartWidget from "../widgets/ChartWidget";
+import ListWidget from "../widgets/ListWidget";
+
+export default class SampleDashboard extends BaseDashboardTerms of Use
+
+ Your chart
+ } appearance="transparent" />
+
+ );
+ }
+
+ override body(): JSX.Element | undefined {
+ return (
+
+
+ );
+ }
+
+ override footer(): JSX.Element | undefined {
+ return (
+ }
+ iconPosition="after"
+ size="small"
+ >
+ View details
+
+ );
+ }
+
+ private retriveChartsData(r: DayRange): IChartProps {
+ const chartPoints = [
+ {
+ legend: "Line 1",
+ data: getChart1Points(r),
+ color: "#6264A7",
+ },
+ {
+ legend: "Line 2",
+ data: getChart2Points(r),
+ color: "#D9DBDB",
+ },
+ ];
+ const chartData = {
+ lineChartData: chartPoints,
+ };
+ return chartData;
+ }
+}
diff --git a/templates/dashboard-tab-ts/src/widgets/ListWidget.tsx b/templates/dashboard-tab-ts/src/widgets/ListWidget.tsx
new file mode 100644
index 00000000..39de6c9e
--- /dev/null
+++ b/templates/dashboard-tab-ts/src/widgets/ListWidget.tsx
@@ -0,0 +1,48 @@
+import "../styles/ListWidget.css";
+
+import { Button, Text } from "@fluentui/react-components";
+import { List28Filled, MoreHorizontal32Regular } from "@fluentui/react-icons";
+import { BaseWidget } from "@microsoft/teamsfx-react";
+
+import { ListModel } from "../models/listModel";
+import { getListData } from "../services/listService";
+
+interface IListWidgetState {
+ data: ListModel[];
+}
+
+export default class ListWidget extends BaseWidget
+ {this.state.timeRange?.map((t: TimeModel, i: any) => {
+ return (
+
+ this.setState({
+ chartProps: this.retriveChartsData(t.range),
+ selectedRange: t.range,
+ })
+ }
+ >
+ {t.name}
+
+ );
+ })}
+
+
+ {this.state.chartProps && (
+
+
+ )}
+
+ Your List
+ } appearance="transparent" />
+
+ );
+ }
+
+ body(): JSX.Element | undefined {
+ return (
+
+ {this.state.data?.map((t: ListModel) => {
+ return (
+
+ );
+ }
+
+ footer(): JSX.Element | undefined {
+ return ;
+ }
+}
diff --git a/templates/dashboard-tab-ts/teamsapp.local.yml b/templates/dashboard-tab-ts/teamsapp.local.yml
new file mode 100644
index 00000000..5d76c42d
--- /dev/null
+++ b/templates/dashboard-tab-ts/teamsapp.local.yml
@@ -0,0 +1,85 @@
+# yaml-language-server: $schema=https://aka.ms/teams-toolkit/v1.5/yaml.schema.json
+# Visit https://aka.ms/teamsfx-v5.0-guide for details on this file
+# Visit https://aka.ms/teamsfx-actions for details on actions
+version: v1.5
+
+provision:
+ # Creates a Teams app
+ - uses: teamsApp/create
+ with:
+ # Teams app name
+ name: dashboard-tab-ts${{APP_NAME_SUFFIX}}
+ # Write the information of created resources into environment file for
+ # the specified environment variable(s).
+ writeToEnvironmentFile:
+ teamsAppId: TEAMS_APP_ID
+
+ # Set TAB_DOMAIN and TAB_ENDPOINT for local launch
+ - uses: script
+ with:
+ run:
+ echo "::set-teamsfx-env TAB_DOMAIN=localhost";
+ echo "::set-teamsfx-env TAB_ENDPOINT=https://localhost:53000";
+ # Validate using manifest schema
+ - uses: teamsApp/validateManifest
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ # Build Teams app package with latest env value
+ - uses: teamsApp/zipAppPackage
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+ # Validate app package using validation rules
+ - uses: teamsApp/validateAppPackage
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Apply the Teams app manifest to an existing Teams app in
+ # Teams Developer Portal.
+ # Will use the app id in manifest file to determine which Teams app to update.
+ - uses: teamsApp/update
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Extend your Teams app to Outlook and the Microsoft 365 app
+ - uses: teamsApp/extendToM365
+ with:
+ # Relative path to the build app package.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Write the information of created resources into environment file for
+ # the specified environment variable(s).
+ writeToEnvironmentFile:
+ titleId: M365_TITLE_ID
+ appId: M365_APP_ID
+
+deploy:
+ # Install development tool(s)
+ - uses: devTool/install
+ with:
+ devCert:
+ trust: true
+ # Write the information of installed development tool(s) into environment
+ # file for the specified environment variable(s).
+ writeToEnvironmentFile:
+ sslCertFile: SSL_CRT_FILE
+ sslKeyFile: SSL_KEY_FILE
+
+ # Run npm command
+ - uses: cli/runNpmCommand
+ name: install dependencies
+ with:
+ args: install --no-audit
+
+ # Generate runtime environment variables
+ - uses: file/createOrUpdateEnvironmentFile
+ with:
+ target: ./.localConfigs
+ envs:
+ BROWSER: none
+ HTTPS: true
+ PORT: 53000
+ SSL_CRT_FILE: ${{SSL_CRT_FILE}}
+ SSL_KEY_FILE: ${{SSL_KEY_FILE}}
diff --git a/templates/dashboard-tab-ts/teamsapp.yml b/templates/dashboard-tab-ts/teamsapp.yml
new file mode 100644
index 00000000..4a77baf0
--- /dev/null
+++ b/templates/dashboard-tab-ts/teamsapp.yml
@@ -0,0 +1,142 @@
+# yaml-language-server: $schema=https://aka.ms/teams-toolkit/v1.5/yaml.schema.json
+# Visit https://aka.ms/teamsfx-v5.0-guide for details on this file
+# Visit https://aka.ms/teamsfx-actions for details on actions
+version: v1.5
+
+environmentFolderPath: ./env
+
+# Triggered when 'teamsapp provision' is executed
+provision:
+ # Creates a Teams app
+ - uses: teamsApp/create
+ with:
+ # Teams app name
+ name: dashboard-tab-ts${{APP_NAME_SUFFIX}}
+ # Write the information of created resources into environment file for
+ # the specified environment variable(s).
+ writeToEnvironmentFile:
+ teamsAppId: TEAMS_APP_ID
+
+ - uses: arm/deploy # Deploy given ARM templates parallelly.
+ with:
+ # AZURE_SUBSCRIPTION_ID is a built-in environment variable,
+ # if its value is empty, TeamsFx will prompt you to select a subscription.
+ # Referencing other environment variables with empty values
+ # will skip the subscription selection prompt.
+ subscriptionId: ${{AZURE_SUBSCRIPTION_ID}}
+ # AZURE_RESOURCE_GROUP_NAME is a built-in environment variable,
+ # if its value is empty, TeamsFx will prompt you to select or create one
+ # resource group.
+ # Referencing other environment variables with empty values
+ # will skip the resource group selection prompt.
+ resourceGroupName: ${{AZURE_RESOURCE_GROUP_NAME}}
+ templates:
+ - path: ./infra/azure.bicep # Relative path to this file
+ # Relative path to this yaml file.
+ # Placeholders will be replaced with corresponding environment
+ # variable before ARM deployment.
+ parameters: ./infra/azure.parameters.json
+ # Required when deploying ARM template
+ deploymentName: Create-resources-for-tab
+ # Teams Toolkit will download this bicep CLI version from github for you,
+ # will use bicep CLI in PATH if you remove this config.
+ bicepCliVersion: v0.9.1
+
+ # Get the deployment token from Azure Static Web Apps
+ - uses: azureStaticWebApps/getDeploymentToken
+ with:
+ resourceId: ${{AZURE_STATIC_WEB_APPS_RESOURCE_ID}}
+ # Save deployment token to the environment file for the deployment action
+ writeToEnvironmentFile:
+ deploymentToken: SECRET_TAB_SWA_DEPLOYMENT_TOKEN
+
+ # Validate using manifest schema
+ - uses: teamsApp/validateManifest
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ # Build Teams app package with latest env value
+ - uses: teamsApp/zipAppPackage
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+ # Validate app package using validation rules
+ - uses: teamsApp/validateAppPackage
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Apply the Teams app manifest to an existing Teams app in
+ # Teams Developer Portal.
+ # Will use the app id in manifest file to determine which Teams app to update.
+ - uses: teamsApp/update
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Extend your Teams app to Outlook and the Microsoft 365 app
+ - uses: teamsApp/extendToM365
+ with:
+ # Relative path to the build app package.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Write the information of created resources into environment file for
+ # the specified environment variable(s).
+ writeToEnvironmentFile:
+ titleId: M365_TITLE_ID
+ appId: M365_APP_ID
+
+# Triggered when 'teamsapp deploy' is executed
+deploy:
+ # Run npm command
+ - uses: cli/runNpmCommand
+ name: install dependencies
+ with:
+ args: install --production
+ - uses: cli/runNpmCommand
+ name: build app
+ 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
+ ${{SECRET_TAB_SWA_DEPLOYMENT_TOKEN}} --env production'
+
+# Triggered when 'teamsapp publish' is executed
+publish:
+ # Validate using manifest schema
+ - uses: teamsApp/validateManifest
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ # Build Teams app package with latest env value
+ - uses: teamsApp/zipAppPackage
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+ # Validate app package using validation rules
+ - uses: teamsApp/validateAppPackage
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Apply the Teams app manifest to an existing Teams app in
+ # Teams Developer Portal.
+ # Will use the app id in manifest file to determine which Teams app to update.
+ - uses: teamsApp/update
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Publish the app to
+ # Teams Admin Center (https://admin.teams.microsoft.com/policies/manage-apps)
+ # for review and approval
+ - uses: teamsApp/publishAppPackage
+ with:
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Write the information of created resources into environment file for
+ # the specified environment variable(s).
+ writeToEnvironmentFile:
+ publishedAppId: TEAMS_APP_PUBLISHED_APP_ID
+projectId: 410df8f9-505b-48b0-8947-9035b16902fc
diff --git a/templates/dashboard-tab-ts/tsconfig.json b/templates/dashboard-tab-ts/tsconfig.json
new file mode 100644
index 00000000..a9e45eac
--- /dev/null
+++ b/templates/dashboard-tab-ts/tsconfig.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"]
+ }
\ No newline at end of file
diff --git a/templates/default-bot-js/.gitignore b/templates/default-bot-js/.gitignore
new file mode 100644
index 00000000..07a76d44
--- /dev/null
+++ b/templates/default-bot-js/.gitignore
@@ -0,0 +1,19 @@
+# TeamsFx files
+env/.env.*.user
+env/.env.local
+.localConfigs.testTool
+.localConfigs
+.notification.localstore.json
+.notification.testtoolstore.json
+appPackage/build
+
+# dependencies
+node_modules/
+
+# misc
+.env
+.deployment
+.DS_Store
+
+# Dev tool directories
+/devTools/
\ No newline at end of file
diff --git a/templates/default-bot-js/.vscode/extensions.json b/templates/default-bot-js/.vscode/extensions.json
new file mode 100644
index 00000000..aac0a6e3
--- /dev/null
+++ b/templates/default-bot-js/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+ "recommendations": [
+ "TeamsDevApp.ms-teams-vscode-extension"
+ ]
+}
diff --git a/templates/default-bot-js/.vscode/launch.json b/templates/default-bot-js/.vscode/launch.json
new file mode 100644
index 00000000..ccf40807
--- /dev/null
+++ b/templates/default-bot-js/.vscode/launch.json
@@ -0,0 +1,132 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Launch Remote (Edge)",
+ "type": "msedge",
+ "request": "launch",
+ "url": "https://teams.microsoft.com/l/app/${{TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
+ "presentation": {
+ "group": "3-remote",
+ "order": 1
+ },
+ "internalConsoleOptions": "neverOpen"
+ },
+ {
+ "name": "Launch Remote (Chrome)",
+ "type": "chrome",
+ "request": "launch",
+ "url": "https://teams.microsoft.com/l/app/${{TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
+ "presentation": {
+ "group": "3-remote",
+ "order": 2
+ },
+ "internalConsoleOptions": "neverOpen"
+ },
+ {
+ "name": "Launch App (Edge)",
+ "type": "msedge",
+ "request": "launch",
+ "url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
+ "cascadeTerminateToConfigurations": [
+ "Attach to Local Service"
+ ],
+ "presentation": {
+ "group": "all",
+ "hidden": true
+ },
+ "internalConsoleOptions": "neverOpen",
+ "perScriptSourcemaps": "yes"
+ },
+ {
+ "name": "Launch App (Chrome)",
+ "type": "chrome",
+ "request": "launch",
+ "url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
+ "cascadeTerminateToConfigurations": [
+ "Attach to Local Service"
+ ],
+ "presentation": {
+ "group": "all",
+ "hidden": true
+ },
+ "internalConsoleOptions": "neverOpen",
+ "perScriptSourcemaps": "yes"
+ },
+ {
+ "name": "Attach to Local Service",
+ "type": "node",
+ "request": "attach",
+ "port": 9239,
+ "restart": true,
+ "presentation": {
+ "group": "all",
+ "hidden": true
+ },
+ "internalConsoleOptions": "neverOpen"
+ },
+ {
+ "name": "Launch Remote (Desktop)",
+ "type": "node",
+ "request": "launch",
+ "preLaunchTask": "Start Teams App in Desktop Client (Remote)",
+ "presentation": {
+ "group": "3-remote",
+ "order": 3
+ },
+ "internalConsoleOptions": "neverOpen",
+ }
+ ],
+ "compounds": [
+ {
+ "name": "Debug in Teams (Edge)",
+ "configurations": [
+ "Launch App (Edge)",
+ "Attach to Local Service"
+ ],
+ "preLaunchTask": "Start Teams App Locally",
+ "presentation": {
+ "group": "2-local",
+ "order": 1
+ },
+ "stopAll": true
+ },
+ {
+ "name": "Debug in Teams (Chrome)",
+ "configurations": [
+ "Launch App (Chrome)",
+ "Attach to Local Service"
+ ],
+ "preLaunchTask": "Start Teams App Locally",
+ "presentation": {
+ "group": "2-local",
+ "order": 2
+ },
+ "stopAll": true
+ },
+ {
+ "name": "Debug in Teams (Desktop)",
+ "configurations": [
+ "Attach to Local Service"
+ ],
+ "preLaunchTask": "Start Teams App in Desktop Client",
+ "presentation": {
+ "group": "2-local",
+ "order": 3
+ },
+ "stopAll": true
+ },
+ {
+ "name": "Debug in Test Tool",
+ "configurations": [
+ "Attach to Local Service"
+ ],
+ "preLaunchTask": "Start Teams App (Test Tool)",
+ "presentation": {
+ "group": "1-local",
+ "order": 1
+ },
+ "stopAll": true
+ }
+ ]
+}
diff --git a/templates/default-bot-js/.vscode/settings.json b/templates/default-bot-js/.vscode/settings.json
new file mode 100644
index 00000000..42996202
--- /dev/null
+++ b/templates/default-bot-js/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+ "debug.onTaskErrors": "abort",
+ "json.schemas": [
+ {
+ "fileMatch": [
+ "/aad.*.json"
+ ],
+ "schema": {}
+ }
+ ]
+}
diff --git a/templates/default-bot-js/.vscode/tasks.json b/templates/default-bot-js/.vscode/tasks.json
new file mode 100644
index 00000000..9034316c
--- /dev/null
+++ b/templates/default-bot-js/.vscode/tasks.json
@@ -0,0 +1,232 @@
+// This file is automatically generated by Teams Toolkit.
+// The teamsfx tasks defined in this file require Teams Toolkit version >= 5.0.0.
+// See https://aka.ms/teamsfx-tasks for details on how to customize each task.
+{
+ "version": "2.0.0",
+ "tasks": [
+ {
+ "label": "Start Teams App (Test Tool)",
+ "dependsOn": [
+ "Validate prerequisites (Test Tool)",
+ "Deploy (Test Tool)",
+ "Start application (Test Tool)",
+ "Start Test Tool",
+ ],
+ "dependsOrder": "sequence"
+ },
+ {
+ // Check all required prerequisites.
+ // See https://aka.ms/teamsfx-tasks/check-prerequisites to know the details and how to customize the args.
+ "label": "Validate prerequisites (Test Tool)",
+ "type": "teamsfx",
+ "command": "debug-check-prerequisites",
+ "args": {
+ "prerequisites": [
+ "nodejs", // Validate if Node.js is installed.
+ "portOccupancy" // Validate available ports to ensure those debug ones are not occupied.
+ ],
+ "portOccupancy": [
+ 3978, // app service port
+ 9239, // app inspector port for Node.js debugger
+ 56150, // test tool port
+ ]
+ }
+ },
+ {
+ // Build project.
+ // See https://aka.ms/teamsfx-tasks/deploy to know the details and how to customize the args.
+ "label": "Deploy (Test Tool)",
+ "type": "teamsfx",
+ "command": "deploy",
+ "args": {
+ "env": "testtool",
+ }
+ },
+ {
+ "label": "Start application (Test Tool)",
+ "type": "shell",
+ "command": "npm run dev:teamsfx:testtool",
+ "isBackground": true,
+ "options": {
+ "cwd": "${workspaceFolder}",
+ },
+ "problemMatcher": {
+ "pattern": [
+ {
+ "regexp": "^.*$",
+ "file": 0,
+ "location": 1,
+ "message": 2
+ }
+ ],
+ "background": {
+ "activeOnStart": true,
+ "beginsPattern": "[nodemon] starting",
+ "endsPattern": "restify listening to|Bot/ME service listening at|[nodemon] app crashed"
+ }
+ }
+ },
+ {
+ "label": "Start Test Tool",
+ "type": "shell",
+ "command": "npm run dev:teamsfx:launch-testtool",
+ "isBackground": true,
+ "options": {
+ "env": {
+ "PATH": "${workspaceFolder}/devTools/teamsapptester/node_modules/.bin:${env:PATH}"
+ }
+ },
+ "windows": {
+ "options": {
+ "env": {
+ "PATH": "${workspaceFolder}/devTools/teamsapptester/node_modules/.bin;${env:PATH}"
+ }
+ }
+ },
+ "problemMatcher": {
+ "pattern": [
+ {
+ "regexp": "^.*$",
+ "file": 0,
+ "location": 1,
+ "message": 2
+ }
+ ],
+ "background": {
+ "activeOnStart": true,
+ "beginsPattern": ".*",
+ "endsPattern": "Listening on"
+ }
+ },
+ "presentation": {
+ "panel": "dedicated",
+ "reveal": "silent"
+ }
+ },
+ {
+ "label": "Start Teams App Locally",
+ "dependsOn": [
+ "Validate prerequisites",
+ "Start local tunnel",
+ "Provision",
+ "Deploy",
+ "Start application"
+ ],
+ "dependsOrder": "sequence"
+ },
+ {
+ // Check all required prerequisites.
+ // See https://aka.ms/teamsfx-tasks/check-prerequisites to know the details and how to customize the args.
+ "label": "Validate prerequisites",
+ "type": "teamsfx",
+ "command": "debug-check-prerequisites",
+ "args": {
+ "prerequisites": [
+ "nodejs", // Validate if Node.js is installed.
+ "m365Account", // Sign-in prompt for Microsoft 365 account, then validate if the account enables the sideloading permission.
+ "portOccupancy" // Validate available ports to ensure those debug ones are not occupied.
+ ],
+ "portOccupancy": [
+ 3978, // app service port
+ 9239 // app inspector port for Node.js debugger
+ ]
+ }
+ },
+ {
+ // Start the local tunnel service to forward public URL to local port and inspect traffic.
+ // See https://aka.ms/teamsfx-tasks/local-tunnel for the detailed args definitions.
+ "label": "Start local tunnel",
+ "type": "teamsfx",
+ "command": "debug-start-local-tunnel",
+ "args": {
+ "type": "dev-tunnel",
+ "ports": [
+ {
+ "portNumber": 3978,
+ "protocol": "http",
+ "access": "public",
+ "writeToEnvironmentFile": {
+ "endpoint": "BOT_ENDPOINT", // output tunnel endpoint as BOT_ENDPOINT
+ "domain": "BOT_DOMAIN" // output tunnel domain as BOT_DOMAIN
+ }
+ }
+ ],
+ "env": "local"
+ },
+ "isBackground": true,
+ "problemMatcher": "$teamsfx-local-tunnel-watch"
+ },
+ {
+ // Create the debug resources.
+ // See https://aka.ms/teamsfx-tasks/provision to know the details and how to customize the args.
+ "label": "Provision",
+ "type": "teamsfx",
+ "command": "provision",
+ "args": {
+ "env": "local"
+ }
+ },
+ {
+ // Build project.
+ // See https://aka.ms/teamsfx-tasks/deploy to know the details and how to customize the args.
+ "label": "Deploy",
+ "type": "teamsfx",
+ "command": "deploy",
+ "args": {
+ "env": "local"
+ }
+ },
+ {
+ "label": "Start application",
+ "type": "shell",
+ "command": "npm run dev:teamsfx",
+ "isBackground": true,
+ "options": {
+ "cwd": "${workspaceFolder}"
+ },
+ "problemMatcher": {
+ "pattern": [
+ {
+ "regexp": "^.*$",
+ "file": 0,
+ "location": 1,
+ "message": 2
+ }
+ ],
+ "background": {
+ "activeOnStart": true,
+ "beginsPattern": "[nodemon] starting",
+ "endsPattern": "restify listening to|Bot/ME service listening at|[nodemon] app crashed"
+ }
+ }
+ },
+ {
+ "label": "Start Teams App in Desktop Client",
+ "dependsOn": [
+ "Validate prerequisites",
+ "Start local tunnel",
+ "Provision",
+ "Deploy",
+ "Start application",
+ "Start desktop client"
+ ],
+ "dependsOrder": "sequence"
+ },
+ {
+ "label": "Start desktop client",
+ "type": "teamsfx",
+ "command": "launch-desktop-client",
+ "args": {
+ "url": "teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true"
+ }
+ },
+ {
+ "label": "Start Teams App in Desktop Client (Remote)",
+ "type": "teamsfx",
+ "command": "launch-desktop-client",
+ "args": {
+ "url": "teams.microsoft.com/l/app/${{TEAMS_APP_ID}}?installAppPackage=true"
+ }
+ }
+ ]
+}
\ No newline at end of file
diff --git a/templates/default-bot-js/.webappignore b/templates/default-bot-js/.webappignore
new file mode 100644
index 00000000..f79d01ac
--- /dev/null
+++ b/templates/default-bot-js/.webappignore
@@ -0,0 +1,28 @@
+.webappignore
+.fx
+.deployment
+.localConfigs.testTool
+.localConfigs
+.notification.localstore.json
+.notification.testtoolstore.json
+.vscode
+*.js.map
+*.ts.map
+*.ts
+.git*
+.tsbuildinfo
+CHANGELOG.md
+readme.md
+local.settings.json
+test
+tsconfig.json
+.DS_Store
+teamsapp.yml
+teamsapp.*.yml
+/env/
+/node_modules/.bin
+/node_modules/ts-node
+/node_modules/typescript
+/appPackage/
+/infra/
+/devTools/
\ No newline at end of file
diff --git a/templates/default-bot-js/README.md b/templates/default-bot-js/README.md
new file mode 100644
index 00000000..9e83fb71
--- /dev/null
+++ b/templates/default-bot-js/README.md
@@ -0,0 +1,70 @@
+# Overview of the Basic Bot template
+
+Examples of Microsoft Teams bots in everyday use include:
+
+- Bots that notify about build failures.
+- Bots that provide information about the weather or bus schedules.
+- Bots that provide travel information.
+
+A bot interaction can be a quick question and answer, or it can be a complex conversation. Being a cloud application, a bot can provide valuable and secure access to cloud services and corporate resources.
+
+## Get started with the Basic Bot template
+
+> **Prerequisites**
+>
+> To run the Basic Bot template in your local dev machine, you will need:
+>
+> - [Node.js](https://nodejs.org/), supported versions: 16, 18
+> - [Teams Toolkit Visual Studio Code Extension](https://aka.ms/teams-toolkit) version 5.0.0 and higher or [Teams Toolkit CLI](https://aka.ms/teamsfx-toolkit-cli)
+
+> For local debugging using Teams Toolkit CLI, you need to do some extra steps described in [Set up your Teams Toolkit CLI for local debugging](https://aka.ms/teamsfx-cli-debugging).
+
+1. First, select the Teams Toolkit icon on the left in the VS Code toolbar.
+2. Press F5 to start debugging which launches your app in Teams App Test Tool using a web browser. Select `Debug in Test Tool`.
+3. The browser will pop up to open Teams App Test Tool.
+4. You will receive a welcome message from the bot, and you can send anything to the bot to get an echoed response.
+
+**Congratulations**! You are running an application that can now interact with users in Teams App Test Tool:
+
+
+
+## What's included in the template
+
+| Folder | Contents |
+| - | - |
+| `.vscode` | VSCode files for debugging |
+| `appPackage` | Templates for the Teams application manifest |
+| `env` | Environment files |
+| `infra` | Templates for provisioning Azure resources |
+
+The following files can be customized and demonstrate an example implementation to get you started.
+
+| File | Contents |
+| - | - |
+|`teamsBot.js`| Handles business logics for the Basic Bot.|
+|`index.js`|`index.js` is used to setup and configure the Basic Bot.|
+
+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.
+
+| File | Contents |
+| - | - |
+|`teamsapp.yml`|This is the main Teams Toolkit project file. The project file defines two primary things: Properties and configuration Stage definitions. |
+|`teamsapp.local.yml`|This overrides `teamsapp.yml` with actions that enable local execution and debugging.|
+|`teamsapp.testtool.yml`| This overrides `teamsapp.yml` with actions that enable local execution and debugging in Teams App Test Tool.|
+
+## Extend the Basic Bot template
+
+Following documentation will help you to extend the Basic Bot template.
+
+- [Add or manage the environment](https://learn.microsoft.com/microsoftteams/platform/toolkit/teamsfx-multi-env)
+- [Create multi-capability app](https://learn.microsoft.com/microsoftteams/platform/toolkit/add-capability)
+- [Add single sign on to your app](https://learn.microsoft.com/microsoftteams/platform/toolkit/add-single-sign-on)
+- [Access data in Microsoft Graph](https://learn.microsoft.com/microsoftteams/platform/toolkit/teamsfx-sdk#microsoft-graph-scenarios)
+- [Use an existing Microsoft Entra application](https://learn.microsoft.com/microsoftteams/platform/toolkit/use-existing-aad-app)
+- [Customize the Teams app manifest](https://learn.microsoft.com/microsoftteams/platform/toolkit/teamsfx-preview-and-customize-app-manifest)
+- Host your app in Azure by [provision cloud resources](https://learn.microsoft.com/microsoftteams/platform/toolkit/provision) and [deploy the code to cloud](https://learn.microsoft.com/microsoftteams/platform/toolkit/deploy)
+- [Collaborate on app development](https://learn.microsoft.com/microsoftteams/platform/toolkit/teamsfx-collaboration)
+- [Set up the CI/CD pipeline](https://learn.microsoft.com/microsoftteams/platform/toolkit/use-cicd-template)
+- [Publish the app to your organization or the Microsoft Teams app store](https://learn.microsoft.com/microsoftteams/platform/toolkit/publish)
+- [Develop with Teams Toolkit CLI](https://aka.ms/teams-toolkit-cli/debug)
+- [Preview the app on mobile clients](https://aka.ms/teamsfx-mobile)
diff --git a/templates/default-bot-js/appPackage/color.png b/templates/default-bot-js/appPackage/color.png
new file mode 100644
index 00000000..01aa37e3
Binary files /dev/null and b/templates/default-bot-js/appPackage/color.png differ
diff --git a/templates/default-bot-js/appPackage/manifest.json b/templates/default-bot-js/appPackage/manifest.json
new file mode 100644
index 00000000..9530092b
--- /dev/null
+++ b/templates/default-bot-js/appPackage/manifest.json
@@ -0,0 +1,56 @@
+{
+ "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.17/MicrosoftTeams.schema.json",
+ "manifestVersion": "1.17",
+ "version": "1.0.0",
+ "id": "${{TEAMS_APP_ID}}",
+ "developer": {
+ "name": "Teams App, Inc.",
+ "websiteUrl": "https://www.example.com",
+ "privacyUrl": "https://www.example.com/privacy",
+ "termsOfUseUrl": "https://www.example.com/termofuse"
+ },
+ "icons": {
+ "color": "color.png",
+ "outline": "outline.png"
+ },
+ "name": {
+ "short": "default-bot-js${{APP_NAME_SUFFIX}}",
+ "full": "full name for default-bot-js"
+ },
+ "description": {
+ "short": "short description for default-bot-js",
+ "full": "full description for default-bot-js"
+ },
+ "accentColor": "#FFFFFF",
+ "bots": [
+ {
+ "botId": "${{BOT_ID}}",
+ "scopes": [
+ "personal",
+ "team",
+ "groupChat"
+ ],
+ "supportsFiles": false,
+ "isNotificationOnly": false,
+ "commandLists": [
+ {
+ "scopes": ["personal", "team", "groupChat"],
+ "commands": [
+ {
+ "title": "Hi",
+ "description": "Say hi to the bot."
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "composeExtensions": [],
+ "configurableTabs": [],
+ "staticTabs": [],
+ "permissions": [
+ "identity",
+ "messageTeamMembers"
+ ],
+ "validDomains": []
+}
\ No newline at end of file
diff --git a/templates/default-bot-js/appPackage/outline.png b/templates/default-bot-js/appPackage/outline.png
new file mode 100644
index 00000000..f7a4c864
Binary files /dev/null and b/templates/default-bot-js/appPackage/outline.png differ
diff --git a/templates/default-bot-js/config.js b/templates/default-bot-js/config.js
new file mode 100644
index 00000000..ea6b1a59
--- /dev/null
+++ b/templates/default-bot-js/config.js
@@ -0,0 +1,8 @@
+const config = {
+ MicrosoftAppId: process.env.BOT_ID,
+ MicrosoftAppType: process.env.BOT_TYPE,
+ MicrosoftAppTenantId: process.env.BOT_TENANT_ID,
+ MicrosoftAppPassword: process.env.BOT_PASSWORD,
+};
+
+module.exports = config;
diff --git a/templates/default-bot-js/env/.env.dev b/templates/default-bot-js/env/.env.dev
new file mode 100644
index 00000000..4a8cb515
--- /dev/null
+++ b/templates/default-bot-js/env/.env.dev
@@ -0,0 +1,16 @@
+# This file includes environment variables that will be committed to git by default.
+
+# Built-in environment variables
+TEAMSFX_ENV=dev
+APP_NAME_SUFFIX=dev
+
+# Updating AZURE_SUBSCRIPTION_ID or AZURE_RESOURCE_GROUP_NAME after provision may also require an update to RESOURCE_SUFFIX, because some services require a globally unique name across subscriptions/resource groups.
+AZURE_SUBSCRIPTION_ID=
+AZURE_RESOURCE_GROUP_NAME=
+RESOURCE_SUFFIX=
+
+# Generated during provision, you can also add your own variables.
+BOT_ID=
+TEAMS_APP_ID=
+BOT_AZURE_APP_SERVICE_RESOURCE_ID=
+BOT_DOMAIN=
diff --git a/templates/default-bot-js/env/.env.testtool b/templates/default-bot-js/env/.env.testtool
new file mode 100644
index 00000000..43ce12aa
--- /dev/null
+++ b/templates/default-bot-js/env/.env.testtool
@@ -0,0 +1,8 @@
+# This file includes environment variables that can be committed to git. It's gitignored by default because it represents your local development environment.
+
+# Built-in environment variables
+TEAMSFX_ENV=testtool
+
+# Environment variables used by test tool
+TEAMSAPPTESTER_PORT=56150
+TEAMSFX_NOTIFICATION_STORE_FILENAME=.notification.testtoolstore.json
diff --git a/templates/default-bot-js/index.js b/templates/default-bot-js/index.js
new file mode 100644
index 00000000..67bf7ca6
--- /dev/null
+++ b/templates/default-bot-js/index.js
@@ -0,0 +1,64 @@
+// index.js is used to setup and configure your bot
+
+// Import required packages
+const restify = require("restify");
+
+// Import required bot services.
+// See https://aka.ms/bot-services to learn more about the different parts of a bot.
+const {
+ CloudAdapter,
+ ConfigurationServiceClientCredentialFactory,
+ ConfigurationBotFrameworkAuthentication,
+} = require("botbuilder");
+const { TeamsBot } = require("./teamsBot");
+const config = require("./config");
+
+// Create adapter.
+// See https://aka.ms/about-bot-adapter to learn more about adapters.
+const credentialsFactory = new ConfigurationServiceClientCredentialFactory(config);
+
+const botFrameworkAuthentication = new ConfigurationBotFrameworkAuthentication(
+ {},
+ credentialsFactory
+);
+
+const adapter = new CloudAdapter(botFrameworkAuthentication);
+
+adapter.onTurnError = async (context, error) => {
+ // This check writes out errors to console log .vs. app insights.
+ // NOTE: In production environment, you should consider logging this to Azure
+ // application insights. See https://aka.ms/bottelemetry for telemetry
+ // configuration instructions.
+ console.error(`\n [onTurnError] unhandled error: ${error}`);
+
+ // Only send error message for user messages, not for other message types so the bot doesn't spam a channel or chat.
+ if (context.activity.type === "message") {
+ // Send a message to the user
+ await context.sendActivity(`The bot encountered an unhandled error:\n ${error.message}`);
+ await context.sendActivity("To continue to run this bot, please fix the bot source code.");
+ }
+};
+
+// Create the bot that will handle incoming messages.
+const bot = new TeamsBot();
+
+// Create HTTP server.
+const server = restify.createServer();
+server.use(restify.plugins.bodyParser());
+server.listen(process.env.port || process.env.PORT || 3978, function () {
+ console.log(`\nBot started, ${server.name} listening to ${server.url}`);
+});
+
+// Listen for incoming requests.
+server.post("/api/messages", async (req, res) => {
+ await adapter.process(req, res, async (context) => {
+ await bot.run(context);
+ });
+});
+
+// Gracefully shutdown HTTP server
+["exit", "uncaughtException", "SIGINT", "SIGTERM", "SIGUSR1", "SIGUSR2"].forEach((event) => {
+ process.on(event, () => {
+ server.close();
+ });
+});
diff --git a/templates/default-bot-js/infra/azure.bicep b/templates/default-bot-js/infra/azure.bicep
new file mode 100644
index 00000000..d0a059a6
--- /dev/null
+++ b/templates/default-bot-js/infra/azure.bicep
@@ -0,0 +1,95 @@
+@maxLength(20)
+@minLength(4)
+@description('Used to generate names for all resources in this file')
+param resourceBaseName string
+
+param webAppSKU string
+
+@maxLength(42)
+param botDisplayName string
+
+param serverfarmsName string = resourceBaseName
+param webAppName string = resourceBaseName
+param identityName string = resourceBaseName
+param location string = resourceGroup().location
+
+resource identity 'Microsoft.ManagedIdentity/userAssignedIdentities@2023-01-31' = {
+ location: location
+ name: identityName
+}
+
+// Compute resources for your Web App
+resource serverfarm 'Microsoft.Web/serverfarms@2021-02-01' = {
+ kind: 'app'
+ location: location
+ name: serverfarmsName
+ sku: {
+ name: webAppSKU
+ }
+}
+
+// Web App that hosts your bot
+resource webApp 'Microsoft.Web/sites@2021-02-01' = {
+ kind: 'app'
+ location: location
+ name: webAppName
+ properties: {
+ serverFarmId: serverfarm.id
+ httpsOnly: true
+ siteConfig: {
+ alwaysOn: true
+ appSettings: [
+ {
+ name: 'WEBSITE_RUN_FROM_PACKAGE'
+ value: '1' // Run Azure App Service from a package file
+ }
+ {
+ name: 'WEBSITE_NODE_DEFAULT_VERSION'
+ value: '~18' // Set NodeJS version to 18.x for your site
+ }
+ {
+ name: 'RUNNING_ON_AZURE'
+ value: '1'
+ }
+ {
+ name: 'BOT_ID'
+ value: identity.properties.clientId
+ }
+ {
+ name: 'BOT_TENANT_ID'
+ value: identity.properties.tenantId
+ }
+ {
+ name: 'BOT_TYPE'
+ value: 'UserAssignedMsi'
+ }
+ ]
+ ftpsState: 'FtpsOnly'
+ }
+ }
+ identity: {
+ type: 'UserAssigned'
+ userAssignedIdentities: {
+ '${identity.id}': {}
+ }
+ }
+}
+
+// Register your web service as a bot with the Bot Framework
+module azureBotRegistration './botRegistration/azurebot.bicep' = {
+ name: 'Azure-Bot-registration'
+ params: {
+ resourceBaseName: resourceBaseName
+ identityClientId: identity.properties.clientId
+ identityResourceId: identity.id
+ identityTenantId: identity.properties.tenantId
+ botAppDomain: webApp.properties.defaultHostName
+ botDisplayName: botDisplayName
+ }
+}
+
+// The output will be persisted in .env.{envName}. Visit https://aka.ms/teamsfx-actions/arm-deploy for more details.
+output BOT_AZURE_APP_SERVICE_RESOURCE_ID string = webApp.id
+output BOT_DOMAIN string = webApp.properties.defaultHostName
+output BOT_ID string = identity.properties.clientId
+output BOT_TENANT_ID string = identity.properties.tenantId
diff --git a/templates/default-bot-js/infra/azure.parameters.json b/templates/default-bot-js/infra/azure.parameters.json
new file mode 100644
index 00000000..3670521e
--- /dev/null
+++ b/templates/default-bot-js/infra/azure.parameters.json
@@ -0,0 +1,15 @@
+{
+ "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
+ "contentVersion": "1.0.0.0",
+ "parameters": {
+ "resourceBaseName": {
+ "value": "bot${{RESOURCE_SUFFIX}}"
+ },
+ "webAppSKU": {
+ "value": "B1"
+ },
+ "botDisplayName": {
+ "value": "default-bot-js"
+ }
+ }
+}
\ No newline at end of file
diff --git a/templates/default-bot-js/infra/botRegistration/azurebot.bicep b/templates/default-bot-js/infra/botRegistration/azurebot.bicep
new file mode 100644
index 00000000..a5a27b8f
--- /dev/null
+++ b/templates/default-bot-js/infra/botRegistration/azurebot.bicep
@@ -0,0 +1,42 @@
+@maxLength(20)
+@minLength(4)
+@description('Used to generate names for all resources in this file')
+param resourceBaseName string
+
+@maxLength(42)
+param botDisplayName string
+
+param botServiceName string = resourceBaseName
+param botServiceSku string = 'F0'
+param identityResourceId string
+param identityClientId string
+param identityTenantId string
+param botAppDomain string
+
+// Register your web service as a bot with the Bot Framework
+resource botService 'Microsoft.BotService/botServices@2021-03-01' = {
+ kind: 'azurebot'
+ location: 'global'
+ name: botServiceName
+ properties: {
+ displayName: botDisplayName
+ endpoint: 'https://${botAppDomain}/api/messages'
+ msaAppId: identityClientId
+ msaAppMSIResourceId: identityResourceId
+ msaAppTenantId:identityTenantId
+ msaAppType:'UserAssignedMSI'
+ }
+ sku: {
+ name: botServiceSku
+ }
+}
+
+// Connect the bot service to Microsoft Teams
+resource botServiceMsTeamsChannel 'Microsoft.BotService/botServices/channels@2021-03-01' = {
+ parent: botService
+ location: 'global'
+ name: 'MsTeamsChannel'
+ properties: {
+ channelName: 'MsTeamsChannel'
+ }
+}
diff --git a/templates/default-bot-js/infra/botRegistration/readme.md b/templates/default-bot-js/infra/botRegistration/readme.md
new file mode 100644
index 00000000..d5416243
--- /dev/null
+++ b/templates/default-bot-js/infra/botRegistration/readme.md
@@ -0,0 +1 @@
+The `azurebot.bicep` module is provided to help you create Azure Bot service when you don't use Azure to host your app. If you use Azure as infrastrcture for your app, `azure.bicep` under infra folder already leverages this module to create Azure Bot service for you. You don't need to deploy `azurebot.bicep` again.
\ No newline at end of file
diff --git a/templates/default-bot-js/package.json b/templates/default-bot-js/package.json
new file mode 100644
index 00000000..a9d3dffe
--- /dev/null
+++ b/templates/default-bot-js/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "defaultbotjs",
+ "version": "1.0.0",
+ "msteams": {
+ "teamsAppId": null
+ },
+ "description": "Microsoft Teams Toolkit hello world Bot sample",
+ "engines": {
+ "node": "16 || 18"
+ },
+ "author": "Microsoft",
+ "license": "MIT",
+ "main": "index.js",
+ "scripts": {
+ "dev:teamsfx": "env-cmd --silent -f .localConfigs npm run dev",
+ "dev:teamsfx:testtool": "env-cmd --silent -f .localConfigs.testTool npm run dev",
+ "dev:teamsfx:launch-testtool": "env-cmd --silent -f env/.env.testtool teamsapptester start",
+ "dev": "nodemon --inspect=9239 --signal SIGINT ./index.js",
+ "start": "node ./index.js",
+ "watch": "nodemon ./index.js",
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "dependencies": {
+ "botbuilder": "^4.20.0",
+ "restify": "^10.0.0"
+ },
+ "devDependencies": {
+ "env-cmd": "^10.1.0",
+ "nodemon": "^2.0.7"
+ }
+}
diff --git a/templates/default-bot-js/teamsBot.js b/templates/default-bot-js/teamsBot.js
new file mode 100644
index 00000000..8af35f3b
--- /dev/null
+++ b/templates/default-bot-js/teamsBot.js
@@ -0,0 +1,32 @@
+const { TeamsActivityHandler, TurnContext } = require("botbuilder");
+
+class TeamsBot extends TeamsActivityHandler {
+ constructor() {
+ super();
+
+ this.onMessage(async (context, next) => {
+ console.log("Running with Message Activity.");
+ const removedMentionText = TurnContext.removeRecipientMention(context.activity);
+ const txt = removedMentionText.toLowerCase().replace(/\n|\r/g, "").trim();
+ await context.sendActivity(`Echo: ${txt}`);
+ // By calling next() you ensure that the next BotHandler is run.
+ await next();
+ });
+
+ // Listen to MembersAdded event, view https://docs.microsoft.com/en-us/microsoftteams/platform/resources/bot-v3/bots-notifications for more events
+ this.onMembersAdded(async (context, next) => {
+ const membersAdded = context.activity.membersAdded;
+ for (let cnt = 0; cnt < membersAdded.length; cnt++) {
+ if (membersAdded[cnt].id) {
+ await context.sendActivity(
+ `Hi there! I'm a Teams bot that will echo what you said to me.`
+ );
+ break;
+ }
+ }
+ await next();
+ });
+ }
+}
+
+module.exports.TeamsBot = TeamsBot;
diff --git a/templates/default-bot-js/teamsapp.local.yml b/templates/default-bot-js/teamsapp.local.yml
new file mode 100644
index 00000000..1c0eb33a
--- /dev/null
+++ b/templates/default-bot-js/teamsapp.local.yml
@@ -0,0 +1,80 @@
+# yaml-language-server: $schema=https://aka.ms/teams-toolkit/v1.5/yaml.schema.json
+# Visit https://aka.ms/teamsfx-v5.0-guide for details on this file
+# Visit https://aka.ms/teamsfx-actions for details on actions
+version: v1.5
+
+provision:
+ # Creates a Teams app
+ - uses: teamsApp/create
+ with:
+ # Teams app name
+ name: default-bot-js${{APP_NAME_SUFFIX}}
+ # Write the information of created resources into environment file for
+ # the specified environment variable(s).
+ writeToEnvironmentFile:
+ teamsAppId: TEAMS_APP_ID
+
+ # Create or reuse an existing Microsoft Entra application for bot.
+ - uses: aadApp/create
+ with:
+ # The Microsoft Entra application's display name
+ name: default-bot-js${{APP_NAME_SUFFIX}}
+ generateClientSecret: true
+ signInAudience: AzureADMultipleOrgs
+ writeToEnvironmentFile:
+ # The Microsoft Entra application's client id created for bot.
+ clientId: BOT_ID
+ # The Microsoft Entra application's client secret created for bot.
+ clientSecret: SECRET_BOT_PASSWORD
+ # The Microsoft Entra application's object id created for bot.
+ objectId: BOT_OBJECT_ID
+
+ # Create or update the bot registration on dev.botframework.com
+ - uses: botFramework/create
+ with:
+ botId: ${{BOT_ID}}
+ name: default-bot-js
+ messagingEndpoint: ${{BOT_ENDPOINT}}/api/messages
+ description: ""
+ channels:
+ - name: msteams
+
+ # Validate using manifest schema
+ - uses: teamsApp/validateManifest
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ # Build Teams app package with latest env value
+ - uses: teamsApp/zipAppPackage
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+ # Validate app package using validation rules
+ - uses: teamsApp/validateAppPackage
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Apply the Teams app manifest to an existing Teams app in
+ # Teams Developer Portal.
+ # Will use the app id in manifest file to determine which Teams app to update.
+ - uses: teamsApp/update
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+
+deploy:
+ # Run npm command
+ - uses: cli/runNpmCommand
+ name: install dependencies
+ with:
+ args: install --no-audit
+ # Generate runtime environment variables
+ - uses: file/createOrUpdateEnvironmentFile
+ with:
+ target: ./.localConfigs
+ envs:
+ BOT_ID: ${{BOT_ID}}
+ BOT_PASSWORD: ${{SECRET_BOT_PASSWORD}}
+ BOT_TYPE: 'MultiTenant'
diff --git a/templates/default-bot-js/teamsapp.testtool.yml b/templates/default-bot-js/teamsapp.testtool.yml
new file mode 100644
index 00000000..44d71fd1
--- /dev/null
+++ b/templates/default-bot-js/teamsapp.testtool.yml
@@ -0,0 +1,24 @@
+# yaml-language-server: $schema=https://aka.ms/teams-toolkit/v1.5/yaml.schema.json
+# Visit https://aka.ms/teamsfx-v5.0-guide for details on this file
+# Visit https://aka.ms/teamsfx-actions for details on actions
+version: v1.5
+
+deploy:
+ # Install development tool(s)
+ - uses: devTool/install
+ with:
+ testTool:
+ version: ~0.2.1
+ symlinkDir: ./devTools/teamsapptester
+
+ # Run npm command
+ - uses: cli/runNpmCommand
+ with:
+ args: install --no-audit
+
+ # Generate runtime environment variables
+ - uses: file/createOrUpdateEnvironmentFile
+ with:
+ target: ./.localConfigs.testTool
+ envs:
+ TEAMSFX_NOTIFICATION_STORE_FILENAME: ${{TEAMSFX_NOTIFICATION_STORE_FILENAME}}
\ No newline at end of file
diff --git a/templates/default-bot-js/teamsapp.yml b/templates/default-bot-js/teamsapp.yml
new file mode 100644
index 00000000..5ef8483e
--- /dev/null
+++ b/templates/default-bot-js/teamsapp.yml
@@ -0,0 +1,127 @@
+# yaml-language-server: $schema=https://aka.ms/teams-toolkit/v1.5/yaml.schema.json
+# Visit https://aka.ms/teamsfx-v5.0-guide for details on this file
+# Visit https://aka.ms/teamsfx-actions for details on actions
+version: v1.5
+
+environmentFolderPath: ./env
+
+# Triggered when 'teamsapp provision' is executed
+provision:
+ # Creates a Teams app
+ - uses: teamsApp/create
+ with:
+ # Teams app name
+ name: default-bot-js${{APP_NAME_SUFFIX}}
+ # Write the information of created resources into environment file for
+ # the specified environment variable(s).
+ writeToEnvironmentFile:
+ teamsAppId: TEAMS_APP_ID
+
+ - uses: arm/deploy # Deploy given ARM templates parallelly.
+ with:
+ # AZURE_SUBSCRIPTION_ID is a built-in environment variable,
+ # if its value is empty, TeamsFx will prompt you to select a subscription.
+ # Referencing other environment variables with empty values
+ # will skip the subscription selection prompt.
+ subscriptionId: ${{AZURE_SUBSCRIPTION_ID}}
+ # AZURE_RESOURCE_GROUP_NAME is a built-in environment variable,
+ # if its value is empty, TeamsFx will prompt you to select or create one
+ # resource group.
+ # Referencing other environment variables with empty values
+ # will skip the resource group selection prompt.
+ resourceGroupName: ${{AZURE_RESOURCE_GROUP_NAME}}
+ templates:
+ - path: ./infra/azure.bicep # Relative path to this file
+ # Relative path to this yaml file.
+ # Placeholders will be replaced with corresponding environment
+ # variable before ARM deployment.
+ parameters: ./infra/azure.parameters.json
+ # Required when deploying ARM template
+ deploymentName: Create-resources-for-bot
+ # Teams Toolkit will download this bicep CLI version from github for you,
+ # will use bicep CLI in PATH if you remove this config.
+ bicepCliVersion: v0.9.1
+
+ # Validate using manifest schema
+ - uses: teamsApp/validateManifest
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ # Build Teams app package with latest env value
+ - uses: teamsApp/zipAppPackage
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+ # Validate app package using validation rules
+ - uses: teamsApp/validateAppPackage
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Apply the Teams app manifest to an existing Teams app in
+ # Teams Developer Portal.
+ # Will use the app id in manifest file to determine which Teams app to update.
+ - uses: teamsApp/update
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+
+# Triggered when 'teamsapp deploy' is executed
+deploy:
+ # Run npm command
+ - uses: cli/runNpmCommand
+ name: install dependencies
+ with:
+ args: install --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.
+ - uses: azureAppService/zipDeploy
+ with:
+ # Deploy base folder
+ artifactFolder: .
+ # Ignore file location, leave blank will ignore nothing
+ ignoreFile: .webappignore
+ # The resource id of the cloud resource to be deployed to.
+ # This key will be generated by arm/deploy action automatically.
+ # You can replace it with your existing Azure Resource id
+ # or add it to your environment variable file.
+ resourceId: ${{BOT_AZURE_APP_SERVICE_RESOURCE_ID}}
+
+# Triggered when 'teamsapp publish' is executed
+publish:
+ # Validate using manifest schema
+ - uses: teamsApp/validateManifest
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ # Build Teams app package with latest env value
+ - uses: teamsApp/zipAppPackage
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+ # Validate app package using validation rules
+ - uses: teamsApp/validateAppPackage
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Apply the Teams app manifest to an existing Teams app in
+ # Teams Developer Portal.
+ # Will use the app id in manifest file to determine which Teams app to update.
+ - uses: teamsApp/update
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Publish the app to
+ # Teams Admin Center (https://admin.teams.microsoft.com/policies/manage-apps)
+ # for review and approval
+ - uses: teamsApp/publishAppPackage
+ with:
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Write the information of created resources into environment file for
+ # the specified environment variable(s).
+ writeToEnvironmentFile:
+ publishedAppId: TEAMS_APP_PUBLISHED_APP_ID
+projectId: 08db3837-b6e3-478e-b01e-c921b1641515
diff --git a/templates/default-bot-js/web.config b/templates/default-bot-js/web.config
new file mode 100644
index 00000000..9c8703cb
--- /dev/null
+++ b/templates/default-bot-js/web.config
@@ -0,0 +1,60 @@
+
+
+
+
+
+ {t.title}
+ {t.content}
+
+ );
+ })}
+
+
+
+
+
diff --git a/templates/non-sso-tab-js/teamsapp.local.yml b/templates/non-sso-tab-js/teamsapp.local.yml
new file mode 100644
index 00000000..e20f5be1
--- /dev/null
+++ b/templates/non-sso-tab-js/teamsapp.local.yml
@@ -0,0 +1,81 @@
+# yaml-language-server: $schema=https://aka.ms/teams-toolkit/v1.5/yaml.schema.json
+# Visit https://aka.ms/teamsfx-v5.0-guide for details on this file
+# Visit https://aka.ms/teamsfx-actions for details on actions
+version: v1.5
+
+provision:
+ # Creates a Teams app
+ - uses: teamsApp/create
+ with:
+ # Teams app name
+ name: non-sso-tab-js${{APP_NAME_SUFFIX}}
+ # Write the information of created resources into environment file for
+ # the specified environment variable(s).
+ writeToEnvironmentFile:
+ teamsAppId: TEAMS_APP_ID
+
+ # Set TAB_DOMAIN and TAB_ENDPOINT for local launch
+ - uses: script
+ with:
+ run:
+ echo "::set-teamsfx-env TAB_DOMAIN=localhost";
+ echo "::set-teamsfx-env TAB_ENDPOINT=https://localhost:53000";
+ # Validate using manifest schema
+ - uses: teamsApp/validateManifest
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ # Build Teams app package with latest env value
+ - uses: teamsApp/zipAppPackage
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+ # Validate app package using validation rules
+ - uses: teamsApp/validateAppPackage
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Apply the Teams app manifest to an existing Teams app in
+ # Teams Developer Portal.
+ # Will use the app id in manifest file to determine which Teams app to update.
+ - uses: teamsApp/update
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Extend your Teams app to Outlook and the Microsoft 365 app
+ - uses: teamsApp/extendToM365
+ with:
+ # Relative path to the build app package.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Write the information of created resources into environment file for
+ # the specified environment variable(s).
+ writeToEnvironmentFile:
+ titleId: M365_TITLE_ID
+ appId: M365_APP_ID
+
+deploy:
+ # Install development tool(s)
+ - uses: devTool/install
+ with:
+ devCert:
+ trust: true
+ # Write the information of installed development tool(s) into environment
+ # file for the specified environment variable(s).
+ writeToEnvironmentFile:
+ sslCertFile: SSL_CRT_FILE
+ sslKeyFile: SSL_KEY_FILE
+ # Run npm command
+ - uses: cli/runNpmCommand
+ name: install dependencies
+ with:
+ args: install --no-audit
+ # Generate runtime environment variables
+ - uses: file/createOrUpdateEnvironmentFile
+ with:
+ target: ./.localConfigs
+ envs:
+ PORT: 53000
+ SSL_CRT_FILE: ${{SSL_CRT_FILE}}
+ SSL_KEY_FILE: ${{SSL_KEY_FILE}}
diff --git a/templates/non-sso-tab-js/teamsapp.yml b/templates/non-sso-tab-js/teamsapp.yml
new file mode 100644
index 00000000..d14b2f4f
--- /dev/null
+++ b/templates/non-sso-tab-js/teamsapp.yml
@@ -0,0 +1,137 @@
+# yaml-language-server: $schema=https://aka.ms/teams-toolkit/v1.5/yaml.schema.json
+# Visit https://aka.ms/teamsfx-v5.0-guide for details on this file
+# Visit https://aka.ms/teamsfx-actions for details on actions
+version: v1.5
+
+environmentFolderPath: ./env
+
+# Triggered when 'teamsapp provision' is executed
+provision:
+ # Creates a Teams app
+ - uses: teamsApp/create
+ with:
+ # Teams app name
+ name: non-sso-tab-js${{APP_NAME_SUFFIX}}
+ # Write the information of created resources into environment file for
+ # the specified environment variable(s).
+ writeToEnvironmentFile:
+ teamsAppId: TEAMS_APP_ID
+
+ - uses: arm/deploy # Deploy given ARM templates parallelly.
+ with:
+ # AZURE_SUBSCRIPTION_ID is a built-in environment variable,
+ # if its value is empty, TeamsFx will prompt you to select a subscription.
+ # Referencing other environment variables with empty values
+ # will skip the subscription selection prompt.
+ subscriptionId: ${{AZURE_SUBSCRIPTION_ID}}
+ # AZURE_RESOURCE_GROUP_NAME is a built-in environment variable,
+ # if its value is empty, TeamsFx will prompt you to select or create one
+ # resource group.
+ # Referencing other environment variables with empty values
+ # will skip the resource group selection prompt.
+ resourceGroupName: ${{AZURE_RESOURCE_GROUP_NAME}}
+ templates:
+ - path: ./infra/azure.bicep # Relative path to this file
+ # Relative path to this yaml file.
+ # Placeholders will be replaced with corresponding environment
+ # variable before ARM deployment.
+ parameters: ./infra/azure.parameters.json
+ # Required when deploying ARM template
+ deploymentName: Create-resources-for-tab
+ # Teams Toolkit will download this bicep CLI version from github for you,
+ # will use bicep CLI in PATH if you remove this config.
+ bicepCliVersion: v0.9.1
+
+ # Validate using manifest schema
+ - uses: teamsApp/validateManifest
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ # Build Teams app package with latest env value
+ - uses: teamsApp/zipAppPackage
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+ # Validate app package using validation rules
+ - uses: teamsApp/validateAppPackage
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Apply the Teams app manifest to an existing Teams app in
+ # Teams Developer Portal.
+ # Will use the app id in manifest file to determine which Teams app to update.
+ - uses: teamsApp/update
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Extend your Teams app to Outlook and the Microsoft 365 app
+ - uses: teamsApp/extendToM365
+ with:
+ # Relative path to the build app package.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Write the information of created resources into environment file for
+ # the specified environment variable(s).
+ writeToEnvironmentFile:
+ titleId: M365_TITLE_ID
+ appId: M365_APP_ID
+
+# Triggered when 'teamsapp deploy' is executed
+deploy:
+ # Run npm command
+ - uses: cli/runNpmCommand
+ name: install dependencies
+ with:
+ args: install --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.
+ - uses: azureAppService/zipDeploy
+ with:
+ # Deploy base folder
+ artifactFolder: .
+ # Ignore file location, leave blank will ignore nothing
+ ignoreFile: .webappignore
+ # The resource id of the cloud resource to be deployed to.
+ # This key will be generated by arm/deploy action automatically.
+ # You can replace it with your existing Azure Resource id
+ # or add it to your environment variable file.
+ resourceId: ${{TAB_AZURE_APP_SERVICE_RESOURCE_ID}}
+
+# Triggered when 'teamsapp publish' is executed
+publish:
+ # Validate using manifest schema
+ - uses: teamsApp/validateManifest
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ # Build Teams app package with latest env value
+ - uses: teamsApp/zipAppPackage
+ with:
+ # Path to manifest template
+ manifestPath: ./appPackage/manifest.json
+ outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+ # Validate app package using validation rules
+ - uses: teamsApp/validateAppPackage
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Apply the Teams app manifest to an existing Teams app in
+ # Teams Developer Portal.
+ # Will use the app id in manifest file to determine which Teams app to update.
+ - uses: teamsApp/update
+ with:
+ # Relative path to this file. This is the path for built zip file.
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Publish the app to
+ # Teams Admin Center (https://admin.teams.microsoft.com/policies/manage-apps)
+ # for review and approval
+ - uses: teamsApp/publishAppPackage
+ with:
+ appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+ # Write the information of created resources into environment file for
+ # the specified environment variable(s).
+ writeToEnvironmentFile:
+ publishedAppId: TEAMS_APP_PUBLISHED_APP_ID
+projectId: abe0a12a-5188-4a8e-8426-0c3c601f3b99
diff --git a/templates/non-sso-tab-js/web.config b/templates/non-sso-tab-js/web.config
new file mode 100644
index 00000000..51d3ea95
--- /dev/null
+++ b/templates/non-sso-tab-js/web.config
@@ -0,0 +1,60 @@
+
+
+
+Hello, World
+ +Your app is running
+ + +
+ 
+
+ Well done, {escape(userDisplayName)}!
+{environmentMessage}
+ Web part property value: {escape(description)}
+
+
+ Welcome to SharePoint Framework!
++ The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling. +
+Learn more about SPFx development:
+-
+
- SharePoint Framework Overview +
- Use Microsoft Graph in your solution +
- Build for Microsoft Teams using SharePoint Framework +
- Build for Microsoft Viva Connections using SharePoint Framework +
- Publish SharePoint Framework applications to the marketplace +
- SharePoint Framework API reference +
- Microsoft 365 Developer Community +
- Open Teams Toolkit, and sign into Azure by clicking the `Sign in to Azure` under the `ACCOUNTS` section from sidebar.
- After you signed in, select a subscription under your account.
- Open the command palette and select: `Teams: Provision`.
- Open the command palette and select: `Teams: Deploy`.
- Run command `teamsapp auth login azure`.
- Run command `teamsapp provision`.
- Run command `teamsapp deploy`.
+
+ );
+ }
+}
+
+export default Privacy;
diff --git a/templates/sso-tab-with-obo-flow-ts/src/components/Tab.tsx b/templates/sso-tab-with-obo-flow-ts/src/components/Tab.tsx
new file mode 100644
index 00000000..40eb111d
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/components/Tab.tsx
@@ -0,0 +1,17 @@
+import { useContext } from "react";
+import { Welcome } from "./sample/Welcome";
+import { TeamsFxContext } from "./Context";
+import config from "./sample/lib/config";
+
+const showFunction = Boolean(config.apiName);
+
+export default function Tab() {
+ const { themeString } = useContext(TeamsFxContext);
+ return (
+ Privacy Statement
+
+
+ );
+}
diff --git a/templates/sso-tab-with-obo-flow-ts/src/components/TermsOfUse.tsx b/templates/sso-tab-with-obo-flow-ts/src/components/TermsOfUse.tsx
new file mode 100644
index 00000000..f3a5c10a
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/components/TermsOfUse.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+/**
+ * This component is used to display the required
+ * terms of use statement which can be found in a
+ * link in the about tab.
+ */
+class TermsOfUse extends React.Component {
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+export default TermsOfUse;
diff --git a/templates/sso-tab-with-obo-flow-ts/src/components/sample/AzureFunctions.tsx b/templates/sso-tab-with-obo-flow-ts/src/components/sample/AzureFunctions.tsx
new file mode 100644
index 00000000..94e6b395
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/components/sample/AzureFunctions.tsx
@@ -0,0 +1,108 @@
+import { useContext, useState } from "react";
+import { Button, Spinner } from "@fluentui/react-components";
+import { useData } from "@microsoft/teamsfx-react";
+import * as axios from "axios";
+import { BearerTokenAuthProvider, createApiClient, TeamsUserCredential } from "@microsoft/teamsfx";
+import { TeamsFxContext } from "../Context";
+import config from "./lib/config";
+
+const functionName = config.apiName || "myFunc";
+
+async function callFunction(teamsUserCredential: TeamsUserCredential) {
+ try {
+ const apiBaseUrl = config.apiEndpoint + "/api/";
+ // createApiClient(...) creates an Axios instance which uses BearerTokenAuthProvider to inject token to request header
+ const apiClient = createApiClient(
+ apiBaseUrl,
+ new BearerTokenAuthProvider(async () => (await teamsUserCredential.getToken(""))!.token)
+ );
+ const response = await apiClient.get(functionName);
+ return response.data;
+ } catch (err: unknown) {
+ if (axios.default.isAxiosError(err)) {
+ let funcErrorMsg = "";
+
+ if (err?.response?.status === 404) {
+ funcErrorMsg = `There may be a problem with the deployment of Azure Functions App, please deploy Azure Functions (Run command palette "Teams: Deploy") first before running this App`;
+ } else if (err.message === "Network Error") {
+ funcErrorMsg =
+ "Cannot call Azure Functions due to network error, please check your network connection status and ";
+ if (err.config?.url && err.config.url.indexOf("localhost") >= 0) {
+ funcErrorMsg += `make sure to start Azure Functions locally (Run "npm run start" command inside api folder from terminal) first before running this App`;
+ } else {
+ funcErrorMsg += `make sure to provision and deploy Azure Functions (Run command palette "Teams: Provision" and "Teams: Deploy") first before running this App`;
+ }
+ } else {
+ funcErrorMsg = err.message;
+ if (err.response?.data?.error) {
+ funcErrorMsg += ": " + err.response.data.error;
+ }
+ }
+
+ throw new Error(funcErrorMsg);
+ }
+ throw err;
+ }
+}
+
+export function AzureFunctions(props: { codePath?: string; docsUrl?: string }) {
+ const [needConsent, setNeedConsent] = useState(false);
+ const { codePath, docsUrl } = {
+ codePath: `api/src/functions/${functionName}.ts`,
+ docsUrl: "https://aka.ms/teamsfx-azure-functions",
+ ...props,
+ };
+ const teamsUserCredential = useContext(TeamsFxContext).teamsUserCredential;
+ const { loading, data, error, reload } = useData(async () => {
+ if (!teamsUserCredential) {
+ throw new Error("TeamsFx SDK is not initialized.");
+ }
+ if (needConsent) {
+ await teamsUserCredential!.login(["User.Read"]);
+ setNeedConsent(false);
+ }
+ try {
+ const functionRes = await callFunction(teamsUserCredential);
+ return functionRes;
+ } catch (error: any) {
+ if (error.message.includes("The application may not be authorized.")) {
+ setNeedConsent(true);
+ }
+ }
+ });
+ return (
+ Terms of Use
+
+
+ );
+}
diff --git a/templates/sso-tab-with-obo-flow-ts/src/components/sample/CurrentUser.tsx b/templates/sso-tab-with-obo-flow-ts/src/components/sample/CurrentUser.tsx
new file mode 100644
index 00000000..ca6a044d
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/components/sample/CurrentUser.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+export function CurrentUser(props: { userName?: string }) {
+ const { userName } = {
+ userName: "",
+ ...props,
+ };
+ return (
+ Call your Azure Functions
++ An Azure Functions app is running. Authorize this app and click below to call it for a + response: +
+ {!loading && ( + + )} + {loading && ( +++ )} + {!loading && !!data && !error &&+
{JSON.stringify(data, null, 2)}}
+ {!loading && !data && !error && }
+ {!loading && !!error && {(error as any).toString()}
}
+ How to edit the Azure Functions
+
+ See the code in {codePath} to add your business logic.
+
+ For more information, see the{" "} + + docs + + . +
+ )} +
+
+ );
+}
diff --git a/templates/sso-tab-with-obo-flow-ts/src/components/sample/Deploy.css b/templates/sso-tab-with-obo-flow-ts/src/components/sample/Deploy.css
new file mode 100644
index 00000000..2891c455
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/components/sample/Deploy.css
@@ -0,0 +1,5 @@
+.deploy.page > img {
+ margin: 0 auto;
+ display: block;
+ width: 100%;
+}
diff --git a/templates/sso-tab-with-obo-flow-ts/src/components/sample/Deploy.tsx b/templates/sso-tab-with-obo-flow-ts/src/components/sample/Deploy.tsx
new file mode 100644
index 00000000..a37a0605
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/components/sample/Deploy.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import "./Deploy.css";
+import { Image } from "@fluentui/react-components";
+
+export function Deploy(props: { docsUrl?: string }) {
+ const { docsUrl } = {
+ docsUrl: "https://aka.ms/teamsfx-docs",
+ ...props,
+ };
+ return (
+ Get the current user
+Access basic information about the user like this:
+
+ {`const authConfig: TeamsUserCredentialAuthConfig = {\n clientId: process.env.REACT_APP_CLIENT_ID,\n initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,\n};\n\nconst credential = new TeamsUserCredential(authConfig);\nconst user = await credential.getUserInfo();`}
+
+ {!!userName && (
+ + The currently logged in user's name is {userName} +
+ )} +
+
+ );
+}
diff --git a/templates/sso-tab-with-obo-flow-ts/src/components/sample/EditCode.tsx b/templates/sso-tab-with-obo-flow-ts/src/components/sample/EditCode.tsx
new file mode 100644
index 00000000..738bc35f
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/components/sample/EditCode.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import config from "./lib/config";
+
+const functionName = config.apiName || "myFunc";
+
+export function EditCode(props: {
+ showFunction?: boolean;
+ tabCodeEntry?: string;
+ functionCodePath?: string;
+}) {
+ const { showFunction, tabCodeEntry, functionCodePath } = {
+ showFunction: true,
+ tabCodeEntry: "src/index.tsx",
+ functionCodePath: `api/src/functions/${functionName}.ts`,
+ ...props,
+ };
+ return (
+ Deploy to the Cloud
++ Before publishing your app to Teams App Catalog, you may want to provision and deploy your + app's resources to the cloud to make sure your app will be running smoothly! +
++ To provision your resources, you can either use our CLI command "teamsapp provision" or + apply "Teams: Provision" in Command palette. +
++ To deploy your app, you can either use our CLI command "teamsapp deploy" or apply "Teams: + Deploy" in Command palette. +
++ For more information, see the{" "} + + docs + + . +
+
+
+ );
+}
diff --git a/templates/sso-tab-with-obo-flow-ts/src/components/sample/Publish.css b/templates/sso-tab-with-obo-flow-ts/src/components/sample/Publish.css
new file mode 100644
index 00000000..6b8c5f46
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/components/sample/Publish.css
@@ -0,0 +1,5 @@
+.publish.page > img {
+ margin: 0 auto;
+ display: block;
+ width: 100%;
+}
diff --git a/templates/sso-tab-with-obo-flow-ts/src/components/sample/Publish.tsx b/templates/sso-tab-with-obo-flow-ts/src/components/sample/Publish.tsx
new file mode 100644
index 00000000..493acb6e
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/components/sample/Publish.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import "./Publish.css";
+import { Image } from "@fluentui/react-components";
+
+export function Publish(props: { docsUrl?: string }) {
+ const { docsUrl } = {
+ docsUrl: "https://aka.ms/teamsfx-docs",
+ ...props,
+ };
+ return (
+ Change this code
+
+ The front end is a create-react-app. The entry point is{" "}
+ {tabCodeEntry}. Just save any file and this page will reload automatically.
+
+ This app contains an Azure Functions backend. Find the code in{" "}
+ {functionCodePath}
+
+
+ );
+}
diff --git a/templates/sso-tab-with-obo-flow-ts/src/components/sample/Welcome.css b/templates/sso-tab-with-obo-flow-ts/src/components/sample/Welcome.css
new file mode 100644
index 00000000..2010d621
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/components/sample/Welcome.css
@@ -0,0 +1,99 @@
+.narrow {
+ width: 900px;
+ margin: 0 auto;
+}
+
+.page-padding {
+ padding: 4rem;
+}
+
+.welcome.page > .narrow > img {
+ margin: 0 auto;
+ display: block;
+ width: 200px;
+}
+
+.welcome.page > .narrow > ul {
+ width: 80%;
+ justify-content: space-between;
+ margin: 4rem auto;
+ border-bottom: none;
+}
+
+.welcome.page > .narrow > ul > li {
+ background-color: inherit;
+ margin: auto;
+}
+
+.welcome.page > .narrow > ul > li > a {
+ font-size: 14px;
+ min-height: 32px;
+ border-bottom-color: rgb(98, 100, 167);
+}
+
+.center {
+ text-align: center;
+}
+
+.sections > * {
+ margin: 4rem auto;
+}
+
+.tabList {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ padding: 30px 20px;
+ row-gap: 30px;
+}
+
+pre,
+div.error {
+ background-color: #e5e5e5;
+ padding: 1rem;
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+ border-radius: 3px;
+ margin: 1rem 0;
+ max-height: 200px;
+ overflow-x: scroll;
+ overflow-y: scroll;
+ max-width: 732px;
+}
+
+pre.fixed,
+div.error.fixed {
+ height: 200px;
+}
+
+code {
+ background-color: #e5e5e5;
+ display: inline-block;
+ padding: 0px 6px;
+ border-radius: 3px;
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+code::-webkit-scrollbar,
+pre::-webkit-scrollbar {
+ display: none;
+}
+
+.contrast pre,
+.contrast code,
+.contrast div.error {
+ background-color: #000000;
+ border-color: #ffffff;
+ border-width: thin;
+ border-style: solid;
+}
+
+.dark pre,
+.dark code,
+.dark div.error {
+ background-color: #1b1b1b;
+}
+
+.error {
+ color: red;
+}
diff --git a/templates/sso-tab-with-obo-flow-ts/src/components/sample/Welcome.tsx b/templates/sso-tab-with-obo-flow-ts/src/components/sample/Welcome.tsx
new file mode 100644
index 00000000..f14390ca
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/components/sample/Welcome.tsx
@@ -0,0 +1,93 @@
+import { useContext, useState } from "react";
+import {
+ Image,
+ TabList,
+ Tab,
+ SelectTabEvent,
+ SelectTabData,
+ TabValue,
+} from "@fluentui/react-components";
+import "./Welcome.css";
+import { EditCode } from "./EditCode";
+import { AzureFunctions } from "./AzureFunctions";
+import { CurrentUser } from "./CurrentUser";
+import { useData } from "@microsoft/teamsfx-react";
+import { Deploy } from "./Deploy";
+import { Publish } from "./Publish";
+import { TeamsFxContext } from "../Context";
+import { app } from "@microsoft/teams-js";
+
+export function Welcome(props: { showFunction?: boolean; environment?: string }) {
+ const { showFunction, environment } = {
+ showFunction: true,
+ environment: window.location.hostname === "localhost" ? "local" : "azure",
+ ...props,
+ };
+ const friendlyEnvironmentName =
+ {
+ local: "local environment",
+ azure: "Azure environment",
+ }[environment] || "local environment";
+
+ const [selectedValue, setSelectedValue] = useStatePublish to Teams
++ Your app's resources and infrastructure are deployed and ready? Publish and register your + app to Teams app catalog to share your app with others in your organization! +
++ For more information, see the{" "} + + docs + + . +
+
+
+ );
+}
diff --git a/templates/sso-tab-with-obo-flow-ts/src/components/sample/lib/config.ts b/templates/sso-tab-with-obo-flow-ts/src/components/sample/lib/config.ts
new file mode 100644
index 00000000..1e43cf3f
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/components/sample/lib/config.ts
@@ -0,0 +1,8 @@
+const config = {
+ initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
+ clientId: process.env.REACT_APP_CLIENT_ID,
+ apiEndpoint: process.env.REACT_APP_FUNC_ENDPOINT,
+ apiName: process.env.REACT_APP_FUNC_NAME,
+};
+
+export default config;
diff --git a/templates/sso-tab-with-obo-flow-ts/src/index.css b/templates/sso-tab-with-obo-flow-ts/src/index.css
new file mode 100644
index 00000000..eed3a419
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/index.css
@@ -0,0 +1,18 @@
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+@media only screen and (max-width: 768px) {
+ body {
+ width: fit-content;
+ }
+}
diff --git a/templates/sso-tab-with-obo-flow-ts/src/index.tsx b/templates/sso-tab-with-obo-flow-ts/src/index.tsx
new file mode 100644
index 00000000..c13a3063
--- /dev/null
+++ b/templates/sso-tab-with-obo-flow-ts/src/index.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./components/App";
+import "./index.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container!);
+root.render(
+
+ Congratulations{userName ? ", " + userName : ""}!
+ {hubName &&Your app is running in {hubName}
} +Your app is running in your {friendlyEnvironmentName}
+ +
+
+
+ 1. Build your app locally
+
+
+ 2. Provision and Deploy to the Cloud
+
+
+ 3. Publish to Teams
+
+
+
+
+ {selectedValue === "local" && (
+
+
+
+ )}
+ {selectedValue === "azure" && (
+
+
+ )}
+ {selectedValue === "publish" && (
+
+
+ )}
+