Prerequisites: Get started with Microsoft Teams app development

Before you begin with creating your first Teams app, you must install a few tools and set up your development environment.

Install required tools

Some of the tools you need depend on how you prefer to build your Teams app:

  • Node.js (use the latest v14 LTS release)
  • A browser with developer tools, such as, Microsoft Edge (recommended) or Google Chrome
  • If you are developing with JavaScript, TypeScript, or the SharePoint Framework (SPFx), install Visual Studio Code, version 1.55 or later.
  • If you are developing with .NET, install Visual Studio 2019. Ensure you install the ASP.NET and web development or .NET Core cross-platform development workload.

Warning

There are known issues with npm@7, packaged with Node v15 and later. If you have problems running npm install, ensure you're using Node v14 (LTS)

Install the Teams Toolkit

The Teams Toolkit helps simplify the development process with tools to provision and deploy cloud resources for your app, publish to the Teams store, and more. You can use the toolkit with Visual Studio Code, Visual Studio, or as a CLI (called teamsfx). For more information, see Teams Toolkit for Visual Studio Code, Teams Toolkit for Visual Studio and Teamsfx CLI Tool.

  1. Open Visual Studio Code.
  2. Select the Extensions view (Ctrl+Shift+X / ⌘⇧-X or View > Extensions).
  3. In the search box, enter Teams Toolkit.
  4. Select Install next to the Teams Toolkit.

You also can find the Teams Toolkit on the Visual Studio Code Marketplace.

The following tools can be installed by the Visual Studio Code extension when they are needed. If already installed, the installed version can be used instead. If using Linux including WSL, you must install these tools before use:

  • Azure Functions Core Tools

    Azure Functions Core Tools is used to run any backend components locally during a local debug run, including the authentication helpers required when running your services in Azure. It is installed within the project directory (using the npm devDependencies).

  • .NET SDK

    The .NET SDK is used to install customized bindings for local debugging and Azure Functions app deployments. If you have not installed the .NET 3.1 (or later) SDK globally, the portable version can be installed.

  • ngrok

    Some Teams app features (conversational bots, messaging extensions, and incoming webhooks) require inbound connections. You need to expose your development system to Teams through a tunnel. A tunnel is not required for apps that only include tabs. This package is installed within the project directory (using npm devDependencies).

Install optional tools

Install browser tools for app development. For instance, if your app is written with React, you can use React Developer Tools:

If you want to access data stored in Azure or deploy a cloud-based backend for your Teams app in Azure, install these tools:

If you work with Microsoft Graph data, you should learn about and bookmark the Microsoft Graph Explorer. This browser-based tool allows you to query Microsoft Graph outside of an app.

With the Developer Portal for Teams, you can configure, manage, and distribute your Teams app including to your organization or the Teams store.

Enable sideloading

During development, you must load your app within Teams without distributing it. This is known as sideloading.

If you have a Teams account, verify if you can sideload apps in Teams:

  1. In the Teams client, select Apps.

  2. Select Upload a custom app.

    Illustration showing where in Teams you can upload a custom app.

Note

If you still cannot sideload apps, talk to your Teams administrator. See enable custom Teams apps and turn on custom app uploading for details.

Get a free Teams developer tenant (optional)

If you cannot see the sideload option, or you do not have a Teams account, you can get a free Teams developer account by joining the M365 developer program. The registration process takes approximately two minutes.

  1. Go to the Microsoft 365 developer program.

  2. Select Join Now and follow the onscreen instructions.

  3. In the welcome screen, select Set up E5 subscription.

  4. Set up your administrator account. After you finish, you should see a screen like this.

    Example of what you see after signing up for the Microsoft 365 developer program.

  5. Sign in to Teams using the administrator account you just set up. Verify that you have the Upload a custom app option.

Get a free Azure account

If you wish to host your app or access resources within Azure, you must have an Azure subscription. You can create a free account before you begin.

Sign in to your Microsoft 365 and Azure accounts

You must have access to two accounts:

  • Your Microsoft 365 account credentials. This is the account that you use to sign in to Teams. If you're using a Microsoft 365 developer program tenant, this is the admin account you set up when you registered for the program.
  • Your Azure credentials. This is the account that you use to access the Azure Portal and for provisioning new cloud resources to support your app.
  1. Open Visual Studio Code

  2. Select the Teams icon in the sidebar:

    The Teams Icon in the Visual Studio Code sidebar.

  3. Select Sign in to M365.

    Location of the Accounts section used to sign-in.

    The sign-in process starts using your normal web browser. Complete the sign-in process for your M365 account. When you are prompted, you can close the browser and return to Visual Studio Code.

  4. Return to the Teams Toolkit within Visual Studio Code.

  5. Select Sign in to Azure.

    Tip

    If you have the Azure Account extension installed and are using the same account, you can skip this step. Use the same account as you are using in other extensions.

  6. The sign-in process starts using your normal web browser. Complete the sign-in process for your Azure account. When are prompted, you can close the browser and return to Visual Studio Code.

    When complete, the ACCOUNTS section of the sidebar shows the two accounts separately, together with the number of usable Azure subscriptions available to you. Ensure you have at least one usable Azure subscription available. If not, sign out and use a different account.