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. Confirm that you can see the installed app in the catalog:

6. Move to a channel in a team where you want to test the solution. In the below picture, we have activated General channel in Team:

7. Select + to add a new tab on the channel.

8. Select the sSPFx webpart in the list. You can use the search capability if needed to find your custom tab:

9. Select Add to confirm the tab to be selected.

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.