Redigera

Dela via


Build your basic tab app

Tabs are Teams-aware webpages embedded in Microsoft Teams and a good way to begin developing for Teams. You can add them as part of a channel inside a team, group chat, or personal app for an individual user.

Screenshot shows you the conceptual tab app in Teams client.

In this tutorial, you'll learn about a basic Teams tab app in one of the following ways:

  • GitHub Codespaces: The codespace instance allows you to experience a Teams app instantaneously. It opens Visual Studio Code (VS Code), where the Teams Toolkit extension, the app source code, and all the dependencies are pre-packaged for you.
  • Step-by-step guide: Allows you to set up your development environment and create a Teams app from start.

Before you create your codespace, ensure that you have the following prerequisites:

Tip

GitHub Codespaces offers a free plan with a fixed amount of usage per month. If you need to free up more space, go to github.com/codespaces and delete the codespace that you no longer need.

To create a Teams tab app with GitHub Codespaces, follow these steps:

  1. Select the following button to open GitHub Codespaces.

    Open hello-world tab in GitHub Codespaces

    You might be asked to sign in to GitHub account if you haven't already.

  2. Select Create new codespace.

    Screenshot shows you the GitHub page to create a codespace for tab.

    The Setting up your codespace page appears.

    Screenshot shows you the codespace building your tab.

    Teams Toolkit prepares the tab app project for you and opens it in VS Code in the browser. The Teams Toolkit icon appears in the activity bar of VS Code.

  3. Select Sign in to your Microsoft 365 and Sign in to Azure to sign in with your Microsoft 365 account.

    Screenshot shows you the Teams Toolkit window in browser to sign in.

    Note

    When you build your app, GitHub Codespaces loads it to the Teams client in a new tab. If your browser blocks pop-up tabs or windows, you'll need to allow pop-ups for your app to open.

  4. Select Preview your Teams App (F5) to build your tab app.

    Screenshot shows you the Teams Toolkit window in browser with your tab app.

    GitHub Codespaces builds your tab app, loads it to Teams client, and opens it in a separate browser tab.

  5. When the app dialog appears, select Add to install your tab app in Teams.

    Screenshot shows you the tab app loaded in the Teams client.

    The tab app is installed in the Teams client and opens.

    You've successfully created the tab app and loaded in the Teams client.

    Screenshot shows your tab app loaded in the Teams client.

If a bot is what you're interested in, select the following:

If you want to build a message extension app, select the following: