Build and run your first Microsoft Teams app
Start Microsoft Teams development by building a personal tab that displays "Hello, World!". Build and run your first Teams app using the following steps:
1. Create your app project
Use the Microsoft Teams Toolkit in Visual Studio Code to set up your first app project. Create your app project using the following steps:
- In Visual Studio Code, select Microsoft Teams on the left Activity Bar and choose Create a new Teams app.
- When prompted, sign in with your Microsoft 365 development account.
- On the Add capabilities screen, select Tab then Next.
- Enter a name for your Teams app. (This is the default name for your app and also the name of the app project directory on your local machine.)
- Check only the Personal tab option and select Finish at the bottom of the screen to configure your project.
2. Understand important app project components
Once the toolkit configures your project, you have the components to build a basic personal tab for Teams. The project directories and files display in the Explorer area of Visual Studio Code.
The toolkit automatically creates scaffolding for you in the
src directory based on the capabilities you added during setup.
If you create a tab during setup, for example, the
App.js file in the
Configure your app with App Studio using the Teams app ID. Find the ID in the
teamsAppId object, which is located in your project's
3. Build and run your app
Build and run your app locally to save time. This information is also available in the toolkit
README. Build and run your app using the following steps:
- In a terminal, go to the root directory of your app project and run
Once complete, there's a Compiled successfully! message in the terminal. Your app is running on
4. Sideload your app in Teams
Your app is ready to test in Teams. To do this, you must have a Microsoft 365 development account that allows app sideloading. For more information on account opening, see Teams development account.
Check for issues before sideloading your app, using the validation feature in App Studio, which is included in the toolkit. Fix the errors to successfully sideload the app.
Sideload your app in Teams using the following steps:
To enable sideloading before you sideload your app in Teams, follow the steps in Turn on app sideloading.
- Select the F5 key to launch a Teams web client in Visual Studio Code.
- To display your app content in Teams, specify that where your app is running (
localhost) is trustworthy:
- Open a new tab in the same browser window (Google Chrome by default) which opened after pressing F5.
- Go to
https://localhost:3000/taband proceed to the page.
- Go back to Teams. In the dialog, select Add for me to install your app.
🎉 Congratulations! Your app is running in Teams.
Expand on the personal tab you just created or build another type of Teams app.