Part I : How to Create Microsoft Teams Personal Tab Using SPFx

Introduction:

Microsoft Teams is one of the most popular application for collaboration. To get separate content for each user, Microsoft Teams supports creation of a personal tab. SPFx applications are mostly created in  SharePoint online. However, an SPFx application can also be made available in Microsoft Teams. This does not require logging in to SharePoint, but can still work as intended. By following the steps below, we can create Microsoft Teams Personal Tab application using SPFx. 

Assumption

Let us assume that we are familiar with SharePoint SPFX application and the development environment is ready. 

To setup SharePoint SPFX development environment, visit the link below: 

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment

Also read: Part II : How to Create Microsoft Teams Personal Tab Using SPFx

Create an SPFX Solution 

Start with the basic step required to create any SPFX solution. 

Note: Make sure to enter “Y” for tenant wide deployment option 

Fill in the details as shown in the image below- 

Once the solution is created, open it in your preferred editor. 

Configuration 

• We can build this solution and deploy it to tenant app catalog. 
• There are two ways in which we can make this solution available to Microsoft Teams one is Auto-deployment and the other is manual deployment. 
• Though Manual deployment is generally preferred, we will show you how we can auto-deploy this solution too. 

Auto deployment 

• Open webpart.manifest.json file 
• Under supported host add ‘TeamsPersonalApp’ as another option. 

• Now build the solution and deploy to tenant app catalog.
  • Commands
    • gulp bundle –ship 
    • gulp package-solution –ship  
• During the deployment do not forget to check the checkbox for tenant wide deployment. 

• Once deployed, select the solution and expand the files ribbon where you can see ‘Sync to Teams’ option is enabled. This is because we have provided ‘TeamsPersonalApp’ option in webart.manifest.json file. 

• Click this ribbon button and the solution will be deployed to Microsoft Teams app catalog automatically if you have permission to deploy to Microsoft Teams app catalog.  
• If you see an error ‘failed to deploy’ make sure you have opened https://teams.microsoft.com in another tab of the same browser. 

Now you have successfully deployed the solution automatically. In the next part of the series, ‘How to create Microsoft Teams Personal Tab Using SPFx- Part 2’, we will learn how to perform manual deployment of the SPFx solution.