Deploy Teams app to the cloud

Teams Toolkit helps you to deploy or upload the front-end and back-end code in your application to your provisioned cloud resources in Azure.

Deploy Teams app to the cloud using Visual Studio Code

You can deploy the following to the cloud:

  • The tab, such as front-end applications are deployed to Azure Storage and configured for static web hosting or a sharepoint site.

  • The back-end APIs are deployed to Azure Functions.

  • The bot or message extension is deployed to Azure App Service.

    Note

    Before you deploy app code to Azure cloud, you need to successfully complete the provisioning of cloud resources.

Deploy Teams apps using Teams Toolkit

The Get started guides help you to deploy using Teams Toolkit. You can use the following to deploy your Teams app:

Details on Teams app workload

Teams app workload Source code Build artifact Target resource
Tabs with React
The frontend workload
yourProjectFolder/tabs tabs/build Azure Storage
Tabs with SharePoint
The frontend workload
yourProjectFolder/SPFx SPFx/sharepoint/solution SharePoint app catalog
APIs on Azure Functions
The backend workload
yourProjectFolder/api Not applicable Azure Functions
Bots and message extensions
The backend workload
yourProjectFolder/bot Not applicable Azure App Service

Note

When you include Azure API management resource in your project and trigger deploy, you can publish your APIs in Azure Functions to Azure API management service.

Deploy Teams app to the cloud using Visual Studio

The following apps can be deployed in Visual Studio:

  • The tab app, such as frontend applications are deployed to Azure Storage, configured for static web hosting.
  • The notification bot app with Azure Functions triggers can be deployed to Azure Functions.
  • The bot app or message extension can be deployed to Azure App Services.

After deploying, you can preview the app in Teams client or the web browser before you can start using.

Deploy Teams app using Teams Toolkit

  1. Open Visual Studio.

  2. Select Create a new project or open an existing project from the list.

  3. Right-click on your project MyTeamsApp1 > Teams Toolkit > Deploy to the cloud.

    deploy to cloud

    Note

    In this scenario the project name is MyTeamsApp1.

  4. Select Deploy in the confirmation dialog.

    Deploy to cloud confirmation dialog

    After the deploy process is completed, you can see a pop-up with the confirmation that it is successfully deployed. You can also check the status in the output window.

    deploy to cloud popup

Preview your app

To preview your app, you first need to create a Zip app package and sideload into the Teams client.

  1. Select Project > Teams Toolkit > Zip App Package.

  2. Select option For Local or For Azure to generate Teams app package.

    Generate teams app package

To preview your app in Teams client

  1. Select Project > Teams Toolkit > Preview in Teams.

    Preview Teams app in teams client

    Now your app is sideloaded into Teams.

    Sideload Teams app in teams client

The other way to preview your app:

  1. Right-click on your project MyTeamsApp1 under Solution Explorer.

  2. Select Teams Toolkit > Preview in Teams to launch the Teams app in web browser.

    Preview teams app in web browser

    Note

    The same menu options are available in Project menu.

    Now your app is sideloaded into Teams.

    Sideload Teams app in teams client

See also