Skip to content

[Dev-Docs AI Improvement]: Build your basic tab app #12594

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

[Dev-Docs AI Improvement]: Build your basic tab app #12594

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 53 additions & 35 deletions msteams-platform/get-started/build-basic-tab-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,97 +1,115 @@
---
title: Create Basic Tab App
description: Learn how to build your basic tab app in Microsoft Teams with the help of GitHub codespaces that opens Toolkit extension and step-by-step guides.
description: Learn how to build your basic tab app in Microsoft Teams with the help of GitHub Codespaces that opens Toolkit extension and step-by-step guides.
ms.localizationpriority: high
ms.date: 12/11/2024
ms.topic: reference
---

# 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.
Tabs are Teams-aware webpages embedded within Microsoft Teams. They offer a seamless way to integrate content and functionality into Microsoft Teams. You can add tabs as part of a channel inside a team, group chat, or even deploy them as personal apps for individual users.

:::image type="content" border="false" source="../assets/images/get-started/get-started-tab.png" alt-text="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:
In this tutorial, you'll learn about a basic Teams tab app using one of the following approaches:

* **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.
* **GitHub Codespaces**: This approach leverages a pre-configured codespace instance, which gives you immediate access to a complete development environment. It launches Visual Studio Code (VS Code) in your browser with the Teams Toolkit extension, the app source code, and all the necessary dependencies already set up.
* **Step-by-step guide**: This method walks you through setting up your local development environment from scratch and building a Teams app from the ground up.

---

# [GitHub Codespaces](#tab/teamstoolkitcodespaces)

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

* A GitHub account to create your codespace instance
* A [Microsoft 365 account](https://developer.microsoft.com/microsoft-365/dev-program) with custom app upload permission
* A [Microsoft 365 tenant](../concepts/build-and-test/prepare-your-o365-tenant.md)
* **A GitHub account:** You must have a GitHub account in order to create a codespace instance. If you don't have one already, sign up for a free account.
* **A Microsoft 365 account:** This guide requires a Microsoft 365 account with permission to upload custom apps. More information is available on the [Microsoft 365 developer program page](https://developer.microsoft.com/microsoft-365/dev-program).
* **A Microsoft 365 tenant:** You need to have an active tenant. Learn more about how to set up your tenant by referring to [Prepare your O365 tenant](../concepts/build-and-test/prepare-your-o365-tenant.md).

> [!TIP]
>
> [GitHub Codespaces](https://github.com/features/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](https://github.com/codespaces) and delete the codespace that you no longer need.
>
> [GitHub Codespaces](https://github.com/features/codespaces) provides a free plan with a limited monthly usage quota. If you require additional space, you can manage your codespaces by visiting [github.com/codespaces](https://github.com/codespaces) and deleting any codespaces that are no longer needed.

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

1. Select the following button to open GitHub Codespaces.
1. **Open GitHub Codespaces:**

Select the button below to open GitHub Codespaces. This action will launch your codespace instance pre-configured with the tutorial's starter code.

<a href="https://github.com/codespaces/new?hide_repo_select=true&ref=v3&repo=348288141&machine=standardLinux32gb&location=WestUs2&devcontainer_path=.devcontainer%2Fhello-world-tab-codespaces%2Fdevcontainer.json&resume=1" target="_blank"><img src="https://github.com/codespaces/badge.svg" alt="Open hello-world tab in GitHub Codespaces"></a>
<a href="https://github.com/codespaces/new?hide_repo_select=true&ref=v3&repo=348288141&machine=standardLinux32gb&location=WestUs2&devcontainer_path=.devcontainer%2Fhello-world-tab-codespaces%2Fdevcontainer.json&resume=1" target="_blank">
<img src="https://github.com/codespaces/badge.svg" alt="Open hello-world tab in GitHub Codespaces">
</a>

You might be asked to sign in to GitHub account if you haven't already.
If you have not already signed in to GitHub, you will be prompted to do so.

1. Select **Create new codespace**.
2. **Create a New Codespace:**

After clicking the above link, select **Create new codespace**.

:::image type="content" source="../assets/images/get-started/codespace.png" alt-text="Screenshot shows you the GitHub page to create a codespace for tab.":::

The **Setting up your codespace** page appears.
You will see the **Setting up your codespace** page. After a few moments, the following message appears:

:::image type="content" source="../assets/images/get-started/building-codespace.png" alt-text="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.
During this time, Teams Toolkit prepares the tab app project and opens it in VS Code in your browser. The Teams Toolkit icon becomes visible in the activity bar of VS Code.

3. **Sign in to your Microsoft 365 and Azure Accounts:**

1. Select **Sign in to your Microsoft 365** and **Sign in to Azure** to sign in with your Microsoft 365 account.
Next, select **Sign in to your Microsoft 365** and **Sign in to Azure**. You will use your Microsoft 365 account credentials for these sign-ins.

:::image type="content" source="../assets/images/get-started/toolkit-in-browser-sign-in.png" alt-text="Screenshot shows you the Teams Toolkit window in browser to sign in."lightbox="../assets/images/get-started/add-tab-in-teams.png":::
:::image type="content" source="../assets/images/get-started/toolkit-in-browser-sign-in.png" alt-text="Screenshot shows you the Teams Toolkit window in browser to sign in." lightbox="../assets/images/get-started/add-tab-in-teams.png":::

> [!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.
> [!NOTE]
>
> When building your app, GitHub Codespaces uploads and loads it to the Teams client in a new browser tab. If your browser is configured to block pop-ups, you may need to allow pop-ups to enable the app to open.

1. Select **Preview your Teams App (F5)** to build your tab app.
4. **Preview and Build your Teams App:**

:::image type="content" source="../assets/images/get-started/toolkit-in-browser.png" alt-text="Screenshot shows you the Teams Toolkit window in browser with your tab app."lightbox="../assets/images/get-started/toolkit-in-browser.png":::
Once signed in, select **Preview your Teams App (F5)**. This will initiate the build process for your tab app.

GitHub Codespaces builds your tab app, loads it to Teams client, and opens it in a separate browser tab.
:::image type="content" source="../assets/images/get-started/toolkit-in-browser.png" alt-text="Screenshot shows you the Teams Toolkit window in browser with your tab app." lightbox="../assets/images/get-started/toolkit-in-browser.png":::

1. Select **Add** to install your tab app in Teams.
GitHub Codespaces compiles your tab app, loads it into the Teams client, and opens it in a separate browser tab.

5. **Install the Tab App in Teams:**

After the preview, select **Add** to install your tab app directly into Teams.

:::image type="content" source="../assets/images/get-started/tab-in-teams.png" alt-text="Screenshot of the app details dialog to install the tab app in Teams.":::

When the tab app is added, a dialog appears where you can select the scope to use your app.
A dialog will appear allowing you to select the scope in which you want to use your app.

1. Select **Open** to open the app in personal scope.
6. **Choose the App Scope:**

Alternatively, you can either search and select the required scope or select a channel or chat from the list, and move through the dialog to select **Go**.
For a personal installation, select **Open** to run the app in the personal scope. Alternatively, you can search for and choose the required scope or even select a channel or chat from the available list. Follow the subsequent prompts and select **Go** to confirm your installation.

:::image type="content" source="../assets/images/get-started/tab-in-teams-scope.png" alt-text="Screenshot of the scope selection dialog with the options to open the app from the list of suggested scopes.":::

You've successfully created the tab app and loaded in the Teams client.
Once you complete this step, your tab app will be successfully created and loaded in the Teams client.

:::image type="content" source="../assets/images/get-started/tab-app-in-teams.png" alt-text="Screenshot shows your tab app loaded in the Teams client."lightbox="../assets/images/get-started/tab-app-in-teams.png":::
:::image type="content" source="../assets/images/get-started/tab-app-in-teams.png" alt-text="Screenshot shows your tab app loaded in the Teams client." lightbox="../assets/images/get-started/tab-app-in-teams.png":::

---

# [Step-by-step guide](#tab/step-by-step-guide)

If you want to learn how to start a project with Teams Toolkit from the beginning, you'll need to set up your development environment. Select the following button to start building your basic tab app.
If you prefer to set up your development environment from scratch and start with Teams Toolkit, this guide provides detailed instructions for creating your basic tab app manually.

Select the following button to start building your basic tab app using the step-by-step guide:

> [!div class="nextstepaction"]
> [Start building a basic tab app](../sbs-gs-javascript.yml)

---

If a bot is what you're interested in, select the following:
If you are interested in building a bot instead of a tab app, you can start with the bot guide:

> [!div class="nextstepaction"]
> [Start building a bot](build-notification-bot.md)

If you want to build a message extension app, select the following:
Additionally, if your goal is to create a message extension app, use the following guide:

> [!div class="nextstepaction"]
> [Build message extension](build-message-extension.md)
> [Build message extension](build-message-extension.md)