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.

Hello World Tab shows you how to build a tab app without single sign on.

• How to use Teams Toolkit build a Teams tab app.
• How to use Codespaces to run and preview a Tab app in Teams.

• A GitHub account which will be used to create a codespace with fully configured dev environments in the cloud.
• A Microsoft 365 tenant in which you have permission to upload Teams apps. You can get a free Microsoft 365 developer tenant by joining the Microsoft 365 developer program.

1. Click Open in GitHub Codespaces badge to create a codespace for the sample app.

   Note: you can customize the creation options (e.g. region, machine type) according to your needs.

2. Once your codespace is created, Select the Teams Toolkit icon on the left in the VS Code toolbar. And then select Preview your Teams app (F5) from Teams Toolkit or simply press F5 to run and preview your application.

3. When Teams Web Client is launched in the browser, select the Add button in the dialog to install your app to Teams.

   Note: You may need to allow pop-ups so that Codespace can open a new browser to sideload the app to Teams:

   

• From VS Code:
  1. Sign into Azure by clicking the Sign in to Azure under the ACCOUNTS section from sidebar.
  2. Click Provision in the Cloud from DEPLOYMENT section or open the command palette and select: Teams: Provision in the Cloud.
  3. Click Deploy to the Cloud or open the command palette and select: Teams: Deploy to the Cloud.
• From TeamsFx CLI:
  1. Run command: teamsfx account login azure.
  2. Run command: teamsfx provision --env dev.
  3. Run command: teamsfx deploy --env dev.

• From VS Code:
  1. Open the Run and Debug Activity Panel. Select Launch Remote (Codespaces) from the launch configuration drop-down.
• From TeamsFx CLI:
  1. Run command: teamsfx preview --env dev.

We really appreciate your feedback! If you encounter any issue or error, please report issues to us following the Supporting Guide. Meanwhile you can make recording of your journey with our product, they really make the product better. Thank you!