Debug SPFx Webpart in Microsoft Teams Tab

Generally, Whenever we do any changes in SPFx webpart, We need to follow the following steps to test it as Microsoft Teams Tab :

Create bundle files and its package file
Upload it on app catalog site
Sync webpart with MS Teams
Install and setup webpart in MS teams.

which is a very time consuming and tedious task. We can reduce this time by debugging it on the development server.

In this article, you will learn how to deploy and debug Microsoft Teams Tab on the development server.

In this article we will cover the following steps:

👉 Step 1: Build MS Teams Tab using the SharePoint framework
👉 Step 2: Create a package for local development
👉 Step 3: Upload Package In App Catalog And Deploy It
👉 Step 4: Sync To Teams
👉 Step 5: Install And Setup An App In MS Teams
👉 Step 6: Deployment process

Let’s see step by step solution

Step 1: Build MS Teams Tab using SharePoint framework

First, we have to create a Teams tab using the SharePoint framework. Refer this article to create teams tab. For creating teams tab, we need to create a SPFx webpart. we will use it as a MS teams tab.

Step 2: Create package for local development

After successfully creating webpart, instead of creating the production package with the --ship flag, Instead of this we will create a development package using below commands :

gulp bundle after that execute

gulp package-solution command.

Once above command is executed you will get a warning as below, which shows that this is not the production build, and it is the package for the development server.

Step 3: Upload Package in app catalog and deploy it

Once you get a development package, upload it on app catalog site. On successful upload, you will get the popup as shown below. as you can see, it shows the localhost URL which will act as a development server.

Step 4: Sync to teams

After successful webpart deployment, we will sync webpart with teams.

so, for that we have to select our webpart and then on the top files ribbon you can see sync to teams as below image, Click on that button to sync.

After successfully sync you will get the message as Successfully synced teams solution.

Step 5: Install and setup an app in MS teams

Go to the Microsoft Teams

You can see store at bottom of left panel, click on store and search your created app and then click on install.

Once webpart is installed, it will be available for Teams. Now click on setup, which will ask you to select a channel, On selecting a channel it will add webpart in that channel.

📝 Note:

At the setup time, development server needs to be on, otherwise, it will raise “refused to connect” error, to start development server execute gulp serve.

After successfully setup you can see webpart as a tab .