Start Microsoft Teams app development by building your first app with a tab, a bot, and a message extension capability. This app will have all capabilities and each has its own UI and UX:.
In this tutorial, you'll learn:.
How to set up a new project using command-line tools. How to build three apps with a different capability each—tab, bot, and message extension. How to deploy your app from Developer Portal. Here's a list of tools you'll need to install for building and deploying a Teams app. Use the following commands to verify that the installed versions for the tools are as needed.
Use the terminal window that you are most comfortable with on your platform. These examples use Git Bash (which is included in Git installation), but these scripts will run on most platforms.
To verify the version numbers of tools installed:. Open a terminal window. Run the following command to verify the git version installed on your machine:. Output example: git version 2.19.0.windows.1. Run the following command to verify the node.js version:. Output example: v8.9.3. Verify the version number of npm:.
Output example: 5.5.1.
Verify the version number of gulp:. Output example:CLI version 2.3.0. Run the following command to verify the version number of Visual Studio Code:. Output example:1.28.2.
You can use a different version of these applications without any problem. A tenant is like a space, or a container for your organization in Teams, where you chat, share files, and run meetings.This space is also where you sideload and test your app. Let's verify if you're ready to develop with the tenant.
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. Sideloading is necessary for previewing and testing apps in Teams local environment. If it isn't enabled, you will not be able to preview and test your app in Teams locally.
Do you already have a tenant, and do you have the admin access? Let's check if you really do! Verify if you can sideload apps in Teams:. In the Teams client, select Store icon.
Select Manage your apps.
Look for the option to Upload a custom app. If you see the option, sideloading apps is enabled.
If Teams doesn't show the option to upload a custom app, talk to your Teams administrator.
If you don't have a Teams developer account, you can get it free. Join the Microsoft 365 developer program!
Go to the Microsoft 365 developer program. Select Join Now and follow the onscreen instructions.
In the welcome screen, select Set up E5 subscription. Set up your administrator account.
After you finish, the following screen appears. Sign in to Teams using the administrator account you just set up.
Verify that you have the Upload a custom app option in Teams.
If you wish to host your app or access resources in Azure, you must have an Azure subscription. Create a free account before you begin. Now you’ve got all tools and set up your accounts.
Next, let's set up your development environment and start building!
You can continue to use this terminal window to run the commands that follow in this tutorial. For this tutorial, use the Hello, World! sample to get started. You can download and clone it from GitHub.
To use Git Bash to clone the sample repo:. Open a terminal window. Run the following command to clone the sample repository to your computer:. You can fork this repo if you want to modify and check in your changes to your GitHub repo for future reference.
After you have cloned the repo for Node.js sample app, you can build and test the app in your local environment.
In this page, you'll learn to:. After the repository is cloned, you can build the sample app. Open a terminal window. Run the change directory command in the terminal to change to the sample app directory:.