How To Deploy/Update/Upgrade Existing SPFx Webpart To Microsoft Team

In this article, you will learn how to deploy, update, or upgrade an existing SPFx Web Part to Microsoft Team.

Introduction 

 
Recently, I had been trying to deploy the SPFx web part for Microsoft Teams tab. I had followed this link to create the web part and deploy and install on Microsoft Teams. The intent of this article is to document the correct procedure of first-time deployment and redeployment to MS Teams. We, as a developer, have to perform unit testing and follow this process very frequently. 
 
We won't be talking about how to create an SPFx web part but rather, will focus on how to deploy this web part to Microsoft Teams and then do some changes to the existing solution and redeploy again.
 
Let us see first how to deploy a web part for the first time.
 
Prerequisites
  • We have a "hello world" SPFx web part ready and the code uses this.context.microsoftTeams to refer to Teams related data.
  • webpart.manifest.json has entry "supportedHosts": ["SharePointWebPart", "TeamsTab"] 
  • package-soluton.json has "skipFeatureDeployment": true for tenant wide deployment (this is optional, but for simplicity, we will have this to the automatic deployment of our solution to all site collections under a particular tenant.
Step 1 - Build, Bundle, and Package the solution
 
Use the below three commands one after another. We will get our solution.sppkg under the /sharepoint/solutions folder.
  1. gulp build  
  2. gulp bundle --ship  
  3. gulp package-solution --ship  
Step 2 - Deploy to the app catalog
 
Go to the app catalog, upload your package. You should get the below screen.
 
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
  • Ensure you select "Make this solution available to all sites in the organization". Then, click "Deploy". 
  • Check if the solution was deployed correctly and Error column in View says 'No Error'.
Step 3 - Sync to Teams
 
Select the solution on app catalog, and in the top ribbon, click on "Sync to Teams".
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
 
We should get the below message on the right side.
 
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
 
Step 4 - Add the web part to MS Teams as a tab
 
Go to teams.microsoft.com. Select MS Teams and your channel. From the below screenshot, MyFirstTeam is my Team and General is my channel. Click on +.
 
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
 
The below screen would open. We will find our web part on the Other tab. Click on your web part.
 
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
 
In next window, click "Install".
 
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
 
A new popup will open. Click "Save".
 
Once saved, we can see our web part available as Tab in Team's channel. Refer to the screenshot below. 
 
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
 
Please notice it says Version 1 in the welcome message. This concludes the first part of this article to deploy the first web part to the Teams tab. 
 

Update, upgrade or redeploy the changed version of the web part

 
Let us now see how to change some code and redeploy it to see if our changes are being reflected or not.
 
Note
For demo purpose, I would just change 'Version 1' in the welcome message to 'Version 2'. 
 
Step 1  
 
Make code changes in your web part. Please note that we are not changing the solution version number here. We are just changing the text in the webpart.ts file which renders HTML.
 
Step 2 - Build, Bundle, and Package Solution
 
Use the below three commands one after another. We will get our solution.sppkg under the /sharepoint/solutions folder.
  1. gulp build
  2. gulp bundle --ship
  3. gulp package-solution --ship
Note
This step is mandatory, else your code changes won't be reflected after re-deployment. Please make sure you run this after the code change and before deployment to the app catalog.
 
Step 3 
 
Redeploy the package to the app catalog (steps already given in the first part of the article, refer to step 2).
 
Let us try to Sync to Teams.
 
Select a solution and click on "Sync to Teams". Got error?
 
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
 
When I checked the browser console, it displays the below error for web service which is requesting sync solution to teams.
 
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
 
The first thing which comes to our mind is that it is giving an error because it is installed on the MS Teams. Agreed!
 
Step 4 - Delete web part from MS Teams 
 
Let us remove it from MS Teams. Go to MS Teams site. Refer to the below screenshot on where to find the Remove button. Click on "Remove".
 
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
 
Once removed, go to the app catalog and try "Sync to Teams" again. You will notice the same error again.
 
This is because though we just removed the tab from MS Teams channel, MyFirstTeam still has this app installed.
 
Click on MyFirstTeam in the above screenshot from the breadcrumb.
 
As in the below screenshot, click on the Apps tab. We can see AllPlatformWebPart app and a delete button. Click on the delete button.
 
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
 
After it is successfully deleted, go to App Catalog again and try "Sync to Teams". Still same error? This is because, though we have deleted it from MyFirstTeam team, it is still available in MS Teams Store of our tenant. 
 
Actual Step 4  - Let us delete from there. On Teams, on the left side bottom, we will find a store icon. Click on it. The below screen would appear.
 
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
 
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
 
Once successfully deleted, go again to the app catalog. 
 
Step 5 - Sync to Teams
 
Click on 'Sync to Teams' and this time, it would be successfully synced to the Teams solution.
 
Step 6
 
Add the web part again to MS Teams tab (step 4 of part 1) using the same steps.
 
Once added successfully, we will see our code changes reflected and an updated web part. Refer to the below screenshot.
 
How To Deploy/Update/Upgrade Existing SFx Webpart To Microsoft Team
 
Notice how the welcome message in the above web part contains 'Version 2'.
 
That's it. We have redeployed the updated version of the web part to MS Teams.
 
Important Note
To remove an App from MS Teams, you can directly remove it from Teams Store. No need to remove from individual MS Teams tabs and Teams. I have added some additional steps because I tried and wanted to share that removing from individual Teams does not resolve the issue of 'Failed to sync to teams' error until it is removed from MS Team store.
 
Hope this helps. Happy coding!!!