Prerequisites for creating your Teams app using Visual Studio

Article
08/16/2023

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
	Microsoft Edge (recommended) or Google Chrome	A browser with developer tools.	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 including to your organization or the Microsoft Teams Store.	JavaScript and SPFx

Install required tools to build your Teams app

Ensure that the following tools are installed on the device where you’ll create your app project before you start building your Teams app:

	Tools	For using
Required
Microsoft Visual Studio 2022	Use the latest version, ASP.NET and web development workload, and Microsoft Teams development tools option.	C# or Blazor.
Teams Toolkit	The Microsoft Visual Studio Code extension to create a Teams app project. Use the latest version.	JavaScript, TypeScript, and SPFx.
Microsoft Teams	Sideloading feature to test your app behavior within your local Teams environment.	JavaScript, TypeScript, SPFx, and C# or Blazor.
Microsoft Edge (recommended) or Google Chrome	A browser with developer tools.	JavaScript, TypeScript, SPFx, and C# or Blazor.
Optional
Azure Tools for Visual Studio Code and Azure CLI	Stored data or deploy a cloud-based back-end for your Teams app in Azure.	JavaScript and TypeScript.
React Developer Tools for Chrome or React Developer Tools for Microsoft Edge	The browser based DevTools extension for the open-source React JavaScript library.	JavaScript, TypeScript, and SPFx.
Microsoft Graph Explorer	The browser-based tool that lets you run a query from Microsoft Graph data.	JavaScript, TypeScript, SPFx, and C# or Blazor.
Developer Portal for Teams	The web-based portal to configure, manage, and distribute your Teams app including to your organization or the Teams Store.	JavaScript, TypeScript, SPFx, and C# or Blazor.

It's recommended that you bookmark the Microsoft Graph Explorer to learn about Microsoft Graph services. This browser-based tool allows you to run a query and access the Microsoft Graph API.

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 account with a valid subscription	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.

Microsoft 365 developer program

Note

To build Teams apps, you must have a work or school Microsoft 365 account. Microsoft 365 personal account can't be used.

If you don't have any, to create a developer 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 can use Azure account to provision Azure resource to host your Teams app. You can create a free account in case you don't have any. If you don't use Teams Toolkit to provision and deploy, Azure account isn't required.

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 toggle Upload custom apps to On position.
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.