Tabs are Teams-aware webpages embedded in Microsoft Teams. A channel/group tab delivers content to channels and group chats, and are a great way to create collaborative spaces around dedicated web-based content.
- Tabs
-
M365 developer account or access to a Teams account with the appropriate permissions to install an app.
-
dev tunnel or Ngrok (For local environment testing) latest version (any other tunneling software can also be used)
-
Teams Microsoft Teams is installed and you have an account
The simplest way to run this sample in Teams is to use Teams Toolkit for Visual Studio Code.
- Ensure you have downloaded and installed Visual Studio Code
- Install the Teams Toolkit extension
- Select File > Open Folder in VS Code and choose this samples directory from the repo
- Using the extension, sign in with your Microsoft 365 account where you have permissions to upload custom apps
- Select Debug > Start Debugging or F5 to run the app in a Teams web client.
- In the browser that launches, select the Add button to install the app to Teams.
If you do not have permission to upload custom apps (sideloading), Teams Toolkit will recommend creating and using a Microsoft 365 Developer Program account - a free program to get your own dev environment sandbox that includes Teams.
Start debugging the project by hitting the F5 key or click the debug icon in Visual Studio Code and click the Start Debugging green arrow button using Teams Toolkit
On the first time running and debugging your app you need allow the localhost certificate. After starting debugging when Chrome is launched and you have installed your app it will fail to load.
Ensure you have the Debugger for Chrome/Edge extension installed for Visual Studio Code from the marketplace.
npm run build
-
To view your app in Outlook on the web.
-
Go to Outlook on the weband sign in using your dev tenant account.
On the side bar, select More Apps. Your sideloaded app title appears among your installed apps
Select your app icon to launch and preview your app running in Outlook on the web
Note: Similarly, you can test your application in the Outlook desktop app as well.
-
To preview your app running in Office on the web.
-
Log into office.com with test tenant credentials
Select the Apps icon on the side bar. Your sideloaded app title appears among your installed apps
Select your app icon to launch your app in Office on the web
Note: Similarly, you can test your application in the Office 365 desktop app as well.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
tab-personal-quickstart Extend Teams apps across Microsoft 365