Build a Teams Application Using SharePoint Framework (SPFx)

SharePoint platform is the most widely used content management system by organizations across the globe. As a Microsoft Gold Partner, we build enterprise-level SharePoint solutions for your team to collaborate and share information easily.

We already know that Microsoft has started supporting the Teams Tab/Personal App from SharePoint framework. This app will have a tab capability.

Hosted with SharePoint: You have the actual code hosted on a SharePoint site that relates to Teams, so you do not need to worry about seeing where you can host the code on Teams customizations. Also, it simplifies your deployment operations by deploying them in a SharePoint Online App Catalog and synchronizing to the Teams store from there.

Graph API support: You can consume the Graph API easily with a web part using GraphHTTPClient get the code running. Graph API has responded quickly to this trend with the implementation of more and more production endpoints for Teams, giving us the real potential to provide our customers with all the key features they need.

Reuse implementation: You can quickly implement the same customization on SharePoint and Microsoft Teams, saving a lot of development time.

Here we follow three steps:

Setup and Build App
Run and Debug
Deploy App

Setup and Build App

Open Visual Studio code.
Select the Extension icon in the Visual Studio Code Activity Bar

Install Teams Toolkit and select the Teams Toolkit.
Select Create a new app.

Select Tab

Select SPFx Works in Teams, Outlook and the Microsoft 365 app

Select an option for scaffolding

Select React in the Framework section.

Enter the Web Part Name.

Select the folder section and Enter the Application name for the app.

This will create a folder with this name in the folder you selected earlier. The toolkit will scaffold the project now, and you can view its structure.

The app will be created in few mins and opens in a new window of visual studio code.

After app is created, Select the Teams Toolkit icon in the sidebar, and select Sign in to Microsoft 365

Return to visual studio code.

Run and Debug

Select the Run and Debug icon from the Visual Studio Code sidebar.
Select Teams workbench (Chrome) options to run and debug the app.
A new chrome window will with a Microsoft Teams tab appear and login with MS Office credentials.
Click Add

Select Load debug scripts to load debug scripts before the app is sideloaded in Teams.

Now you can see the Teams App and its running, and you can debug the app as you do for normal SPFx applications.

Deploy App

Select the Teams Toolkit icon in the sidebar, Select the Provision under Lifecycle menu.

After provisioning is complete, Select Deploy

The app package is built and uploaded to the SharePoint site. The Teams Toolkit displays a message with the local path where the app package is saved.

After Deploy is complete, select Publish

After published you need to contact the Teams Administrator

SPFx Teams apps can be customized to match the organization’s branding and design guidelines, ensuring a consistent and professional look across all apps used in Teams.

SharePoint serves as a centralized repository for documents, lists, and data. By bringing SharePoint content into Teams using SPFx apps, organizations can create a comprehensive information hub where team members can access all relevant data and resources.

SPFx Teams apps offer businesses a powerful way to improve collaboration, streamline workflows, and enhance productivity. By leveraging the integration of SharePoint and Teams, organizations can create tailored solutions that meet their unique business needs, drive efficiency, and foster a collaborative and engaged workforce.