How To Deploy/Update/Upgrade Existing SPFx Webpart 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.

gulp build
gulp bundle --ship
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.

 

• 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".

 

We should get the below message on the right side.

 

 

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 +.

 

 

The below screen would open. We will find our web part on the Other tab. Click on your web part.

 

 

In next window, click "Install".

 

 

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. 

 

 

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.

gulp build
gulp bundle --ship
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?

 

 

When I checked the browser console, it displays the below error for web service which is requesting sync solution to teams.

 

 

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".

 

 

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.

 

 

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.

 

 

 

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.

 

 

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!!!