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 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 .
Sharing is Caring.
Happy CodingΒ
Thanks for sharing this article.