Share via

Containerized Tab App with Azure Backend

  • Code Sample
Browse code

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 with Backend shows you how to build a tab app with an Azure Function as backend, how to get user login information with SSO and how to call Azure Function from frontend tab.

Hello World Tab

Note: This sample will only provision single tenant Azure Active Directory app. For multi-tenant support, please refer to this wiki.

This sample illustrates

  • How to use Teams Toolkit to create a Teams tab app.
  • How to use TeamsFx SDK to call Azure Functions.
  • How to use TeamsFx SDK in Azure Function to call Graph to get user info.
  • How to develop Teams tab app in Docker.

Prerequisites

Note

  • This sample has adopted On-Behalf-Of Flow to implement SSO.

  • This sample uses Azure Function as middle-tier service, and make authenticated requests to call Graph from Azure Function.

  • Due to system webview limitations, users in the tenant with conditional access policies applied cannot consent permissions when conduct an OAuth flow within the Teams mobile clients, it would show error: "xxx requires you to secure this device...".

Containerization of Teams App

Teams applications can be developed and run locally using containerization, which provides a consistent and isolated environment for testing and deployment. Containerizing your Teams app makes it easier to manage dependencies, scale efficiently, and maintain your app in production. Below are steps and references to help you containerize your Teams app.

How to containerize

This sample demonstrate how to containerize a Teams App and integrate the Docker container into Teams Toolkit development lifecycle, which can serve as reference for your containerization process.

  • Write a Dockerfile: Create a Dockerfile that specifies the build instructions for your container image. Refer to this Dockerfile example

  • Write a Compose File: Create a Docker Compose file that defines the services, networks and volumes, expecially when there are multiple containers. Refer to this Docker Compose file example

  • Configure Debugging: Configure launch.json and tasks.json to run Docker locally for debugging. Refer to this VS Code launch.json example and VS Code tasks.json example

  • Provision Infrastructure: Automate the provisioning of Azure Container Apps and Azure Container Registry using Bicep templates. Refer to this Azure Bicep example.

  • Build and Deploy to ACA: Build the Docker image and push it to Azure Container Registry using Docker CLI. Deploy the image to Azure Container Apps using Azure CLI. Refer to the deployment scripts in this teamsapp.yml example.

Minimal path to awesome

Run the app locally

  • From VS Code:

    1. hit F5 to start debugging. Alternatively open the Run and Debug Activity Panel and select Debug in Teams (Edge) or Debug in Teams (Chrome).

  • From TeamsFx CLI:

    1. Run command: teamsapp provision --env local .
    2. Run command: docker compose -f ./docker-compose.yml up -d .
    3. Run command: teamsapp preview --open-only .

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. Login Azure CLI with commands: az login and az account set -s <subscription-id> .
    4. Click Deploy or open the command palette and select: Teams: Deploy .

  • From TeamsFx CLI:

    1. Run command: teamsapp auth login azure .
    2. Run command: teamsapp provision --env dev .
    3. Run command: az login .
    4. 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 (Edge) or Launch Remote (Chrome) from the launch configuration drop-down.

  • From TeamsFx CLI:

    1. Run command: teamsapp preview --env dev.

Further reading

Version History

Date Author Comments
Feb 27, 2024 hund030 onboard sample in Teams Toolkit V5.0.0

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!