Add SPFx WebPart to Microsoft Teams app

To make your meeting app available in Microsoft Teams, you’ll have synchronize your solution with teams.

1. Select the package in the SharePoint tenant App Catalog and select the Sync to Teams button at in the ribbon in the Files tab.

SharePoint Online will detect the TeamsSPFxApp.zip file in the *.sppkg package and deploy it to the Microsoft Teams app store instead of automatically creating the app manifest and app package.

2. Confirm that you can see the status message on the top-right corner.

3. Move to the Microsoft Teams side and check the App Catalog status by selecting Apps from the left navigation

4. Wait until your tenant-specific apps selection is visible:

Note: This can take a few minutes due to caching.

5. Click on the app you want to install. Then click on Add to a team:

6. Select the team & channel you want to add to:

10. Select Save to confirm the tab to be installed on the channel:

Your custom tab has been added on the Microsoft Teams channel and you can see how the code is reacting that it’s in Microsoft Teams context. Theme of the web part is by default coming from the underlying SharePoint site.