Prerequisites for creating your Teams app
Before you create your Teams app project, ensure that the prerequisites are in place. You must:
- Install required tools to build your Teams app
- Prepare Accounts to build your Teams app
- Sideload permission
- Verify sideloading permission
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.
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.
Create a free Microsoft 365 developer account
To create a free Microsoft 365 developer account:
Go to the Microsoft 365 developer program.
Select Join Now.
Set up your administrator account subscription.
After the completion of the subscription, the following information appears:
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.
Open Visual Studio Code.
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.
Create a new Teams Toolkit app project or open an existing app project.
Select Sign in to Microsoft 365 under ACCOUNTS.
Verify if you can see the option Sideloading enabled as shown in the following image:
Verify sideloading permission using Teams client
In the Teams client, select Apps > Manage your apps > Upload an app.
Check if you can see the option Upload a custom app as you can see in the following image:
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:
Sign in to Microsoft 365 admin center with your admin credentials.
Select the
icon > Teams.
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.
Sign in to Microsoft Teams admin center with your admin credentials.
Select the
icon > Teams apps > Setup policies.
Select Global (Org-wide default).
Set Upload custom apps toggle to On.
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
Feedback
Submit and view feedback for