How to use this HelloWorld In-meeting app

Important: Please be advised that access tokens are stored in sessionStorage for you by default. This can make it possible for malicious code in your app (or code pasted into a console on your page) to access APIs at the same privilege level as your client application. Please ensure you only request the minimum necessary scopes from your client application, and perform any sensitive operations from server side code that your client has to authenticate with.

Microsoft Teams supports the ability to run web-based UI inside "custom tabs" that users can install either for just themselves (personal tabs) or within a team or group chat context. Please be advised that mgt-teamsfx-provider library in this app is currently in preview stage, please expect breaking changes in the future release.

Prerequisites

• Node.js, supported versions: 14, 16, 18
• A Microsoft 365 account. If you do not have Microsoft 365 account, apply one from Microsoft 365 developer program
• Teams Toolkit Visual Studio Code Extension

Prepare a meeting

Follow the instruction to create a meeting in Teams. Then in the Calendar you can find the meeting you just created. Double click the meeting will open the meeting details, and will enable the meeting app to be added in this meeting in later steps.

Run the app locally

• In Visual Studio Code: Start debugging the project by hitting the F5 key in your keyboard.
  • Alternatively open the Run and Debug Activity panel(Ctrl+Shift+D) in Visual Studio Code and click the Run and Debug green arrow button.
• The Teams web client will launch in your browser, click the small arrow sit aside the Add button and select Add to a meeting, then select the meeting you just created.
• Click Set up a tab in the next step, it will take you to the meeting configuration page.
• In the configuration page, click Save, this may take several minutes, and then you will see the meeting chat tab.
• Click Join to join the meeting.
• Select the tab (default name is My Tab) in the bar, you will see a side panel tab in the meeting.

Deploy the app to Azure

Deploy your project to Azure by following these steps:

• Open Teams Toolkit in Visual Studio Code, and sign in your Azure account by clicking the Sign in to Azure in the ACCOUNTS section from sidebar.
• After you signed in, select a subscription under your account. The Teams Toolkit will use this subscription to provision Azure resources to host you app.
• Open the Teams Toolkit and click Provision in the cloud in the DEVELOPMENT section.
  • Alternatively open the command palette(Ctrl+Shift+P) and type: Teams: Provision in the cloud command.
• Open the Teams Toolkit and click Deploy to the cloud in the DEVELOPMENT section.
  • Alternatively open the command palette(Ctrl+Shift+P) and type: Teams: Deploy to the cloud command.

Note: Provision Azure cloud resources and deploy to Azure may cause charges to your Azure Subscription.

Preview the app in Teams client

After you have completed the provision and deploy steps in Deploy the app to Azure section, you can preview your app in Teams client by following steps below:

• In Visual Studio Code

  1. Open the Run and Debug Activity panel from sidebar, or use short key Ctrl+Shift+D.
  2. Select Launch Remote (Edge) or Launch Remote (Chrome) in the launch configuration (a dropdown selection in the upper-left corner).
  3. Press the Start Debugging (small green arrow) button to launch your app, the Teams web client will be automatically opened in your browser, where you will see your app running remotely from Azure.