Skip to content

Files

Latest commit

 

History

History

hello-world-tab-codespaces

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
.vscode
.vscode
 
 
appPackage
appPackage
 
 
env
env
 
 
infra
infra
 
 
public
public
 
 
src
src
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
package.json
package.json
 
 
teamsapp.local.yml
teamsapp.local.yml
 
 
teamsapp.yml
teamsapp.yml
 
 

README.md

Getting Started with Hello World Tab Sample

Open app in GitHub Codespaces

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.

Hello world Tab in Teams

This sample illustrates

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

Prerequisite to use this sample

  • 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.

Minimal path to awesome

Run the app in Codespaces

  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:

    image

Deploy the app to Azure

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

Preview the app in Teams

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

Version History

Date Author Comments
Apr 3, 2023 Dooriya Li Add hello world tab sample for codespaces

Feedback

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!