Edit

Prerequisites for creating your Teams app

  • Article

Before you create your Teams app project, ensure that the prerequisites are in place. You must:

Basic requirements to build your Teams app

Ensure the following requirements are met before you start building your Teams app:

  Basic requirements For using For environment type
Required      
  Teams Toolkit A Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use the latest version. JavaScript and SharePoint Framework (SPFx)
  Microsoft Teams Collaborate with everyone you work with through apps for chat, meetings, and call - all in one place. JavaScript and SPFx
  Node.js Back-end JavaScript runtime environment. For more information, see Node.js version compatibility. JavaScript and SPFx
  Node Package Manager (NPM) Install and manage packages for use in both Node.js and ASP.NET Core applications. JavaScript and SPFx
  Microsoft Edge (recommended) or Google Chrome A browser with developer tools. JavaScript and SPFx
  Microsoft Visual Studio Code JavaScript, TypeScript, or SPFx build environments. Use version 1.55 or later. JavaScript and SPFx
Optional      
  Azure Tools for Visual Studio Code and Azure CLI Access stored data or deploy a cloud-based back end for your Teams app in Azure. JavaScript
  React Developer Tools for Chrome or React Developer Tools for Microsoft Edge A browser DevTools extension for the open-source React JavaScript library. JavaScript
  Microsoft Graph Explorer A browser-based tool that lets you run a query from Microsoft Graph data. JavaScript and SPFx
  Developer Portal for Teams A web-based portal to configure, manage, and distribute your Teams app to your organization or the Teams store. JavaScript and SPFx

Install required tools to build your Teams app

Ensure the following requirements are met before you start building your Teams app:

  Basic requirements For using For environment type
Required      
  Teams Toolkit for Visual Studio Code A Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use the latest version. JavaScript and SPFx
  Teams Toolkit for Visual Studio A Microsoft Visual Studio extension that creates a project scaffolding for your app. Use the latest version. C# and Blazor
  Microsoft Teams Collaborate with everyone you work with through apps for chat, meetings, and call - all in one place. JavaScript and SPFx
  Node.js Back-end JavaScript runtime environment. For more information, see Node.js version compatibility. JavaScript and SPFx
  Node Package Manager (NPM) Install and manage packages for use in both Node.js and ASP.NET Core applications. JavaScript and SPFx
  Microsoft Edge (recommended) or Google Chrome A browser with developer tools. JavaScript and SPFx
  Microsoft Visual Studio Code JavaScript, TypeScript, or SPFx build environments. Use version 1.55 or later. JavaScript and SPFx
Optional      
  Azure Tools for Visual Studio Code and Azure CLI Access stored data or deploy a cloud-based back end for your Teams app in Azure. JavaScript
  React Developer Tools for Chrome or React Developer Tools for Microsoft Edge A browser DevTools extension for the open-source React JavaScript library. JavaScript
  Microsoft Graph Explorer A browser-based tool that lets you run a query from Microsoft Graph data. JavaScript and SPFx
  Developer Portal for Teams A web-based portal to configure, manage, and distribute your Teams app to your organization or the Teams store. JavaScript and SPFx

Node.js version compatibility table for project type

Teams Toolkit Version Project Type Supported Node.js Versions
5.0.0 Notify with http or timer trigger
Azure functions
SPFx
Non-SPFx		 16, 18
16, 18
16
16, 18
4.2.2 Notify with http or timer trigger
Azure functions
SPFx		 14, 16, 18 (Preview)
14, 16, 18 (Preview)
16
14, 16, 18
4.2.0 SPFx 16
4.0.3 SPFx 14, 16
4.0.0 Non-SPFx 14, 16
3.7.0 SPFx 12, 14
<3.7.0 SPFx
Azure functions
Other		 10, 12, 14
10, 12, 14
10, 12, 14, 16

Accounts to build your Teams app

Ensure that you have the following accounts before you start building your Teams app:

Accounts For using For environment type
Microsoft 365 work or school account Teams developer account while developing an app. JavaScript, TypeScript, SPFx, and C# or Blazor.
Azure account Back-end resources on Azure. JavaScript, TypeScript, SPFx, and C# or Blazor.
SharePoint collection site administrator account Deployment for hosting. SPFx.

Microsoft 365 developer program

To create a Microsoft 365 account, sign up for a Microsoft 365 developer program subscription. The subscription is free for 90 days and continues to renew as long as you're using it for development activity.

If you have a Visual Studio Enterprise or Professional subscription, both programs include a free Microsoft 365 developer subscription. It's active as long as your Visual Studio subscription is active. For more information, see Microsoft 365 developer subscription.

You can sign up for the developer program using one of the following account types:

  • Microsoft account for personal use

    The Microsoft account provides access to the Microsoft products and cloud services, such as Outlook, Messenger, OneDrive, MSN, Xbox Live, or Microsoft 365.

    Sign up for an Outlook.com mailbox to create a Microsoft 365 account. Use it to access consumer-related Microsoft cloud services or Azure.

    Screenshot shows the personal account icon.

  • Microsoft work account for business

    This account provides access to all small, medium, and enterprise business-level Microsoft cloud services. The services include Azure, Microsoft Intune, and Microsoft 365.

    When you sign up to one of these services as an organization, a cloud-based directory is automatically provisioned in Microsoft Azure Active Directory (Azure AD) to represent your organization.

    Screenshot shows the work account icon.

Create a free Microsoft 365 developer account

To create a free Microsoft 365 developer account:

  1. Go to the Microsoft 365 developer program.

  2. Select Join Now.

  3. Set up your administrator account subscription.

    After the completion of the subscription, the following information appears:

    Screenshot shows the M365 Account subscription options.

Azure account

An Azure account allows you to host a Teams app or the back-end resources for your Teams app to Azure. You can do this using Teams Toolkit in Visual Studio Code. You must have an Azure subscription in the following scenarios:

  • If you already have an existing app on a different cloud provider other than Azure, and you want to integrate the app on Teams platform.
  • If you want to host the back-end resources for your app using another cloud provider, or on your own servers if they're available in the public domain.

Note

You must create a free account before you begin.

SharePoint collection site administrator account

While creating Teams app using SPFx environment, you must have a SharePoint collection site administrator account. It’s required for deploying and hosting your app on SharePoint site. If you're using a Microsoft 365 developer program tenant, you can use the administrator account you created at the time.

Verify sideloading permission

After creating the app, you must load your app in Teams without distributing it. This process is known as sideloading. Sign in to your Microsoft 365 account to view this option.

You can verify if the sideloading permission is enabled using either Visual Studio Code or Teams client.


Verify sideloading permission using Visual Studio Code

You can use this method to verify sideloading permission only after you have created an app project using Teams Toolkit. If you haven't created an app project, you can verify sideloading permission using Teams client.

  1. Open Visual Studio Code.

  2. Select Teams Toolkit from the Visual Studio Code activity bar.

    Note

    If you're unable to see the option, see install Teams Toolkit to install Teams Toolkit extension in Visual Studio Code.

  3. Create a new Teams Toolkit app project or open an existing app project.

  4. Select Sign in to Microsoft 365 under ACCOUNTS.

    Screenshot shows the accounts details.

  5. Verify if you can see the option Sideloading enabled as shown in the following image:

    Screenshot shows the Sideloading enabled option highlighted in red.


Verify sideloading permission using Teams client

  1. In the Teams client, select Apps > Manage your apps > Upload an app.

    Screenshot showing the options to upload an app highlighted in red.

  2. Check if you can see the option Upload a custom app as you can see in the following image:

    Screenshot showing the Upload a custom app option highlighted in red.

Enable sideloading using admin center

If sideloading option isn’t visible in Teams Toolkit extension in Visual Studio Code or if the option to upload a custom app isn’t available in Teams, it indicates that you don't have the required permission for sideloading.

You must enable sideloading for your app in Teams:

  • If you're a tenant admin, enable the sideloading setting for your tenant or organization in the Teams admin center.
  • If you aren't a tenant admin, contact your tenant admin to enable sideloading.

If you have admin rights, you can enable sideloading:

  1. Sign in to Microsoft 365 admin center with your admin credentials.

  2. Select the icon > Teams.

    Screenshot shows the Teams client in the left pane of Microsoft 365 Admin center.

    Note

    It can take up to 24 hours for the Teams option to appear. You can upload your custom app to a Teams environment for testing and validation.

  3. Sign in to Microsoft Teams admin center with your admin credentials.

  4. Select the icon > Teams apps > Setup policies.

    Screenshot shows the Setup policies under Teams apps in Microsoft 365 Admin center.

  5. Select Global (Org-wide default).

    Screenshot shows the Manage policies tab with Global (Org-wide default) option highlighted.

  6. Set Upload custom apps toggle to On.

    Screenshot shows the Upload custom apps toggle highlighted.

  7. Select Save.

    Note

    It can take up to 24 hours for sideloading to become active. In the meantime, you can use upload for your tenant to test your app. To upload the .zip package file of the app, see upload custom apps.

    Ensure that you have the sideloading permission using the steps mentioned in verify sideloading permission using Visual Studio Code or Teams client.

See also