Streamline SPFx development in Microsoft Teams with easy debugging and reusable controls

Published: 04 March 2021
on channel: Microsoft Community Learning
683
10

In this 15-minute Developer-focused demo, Marcin Wojciechowski shares his Utilities script - functions that streamline development by enabling developers to develop and debug SPFx web parts directly inside Teams. This is brilliantly accomplished by appending debug parameters to the URL of the iFrame inside the embedded-page-container. This brings a familiar debug experience to the Teams web app context. The js is executed in the console of the browser. Using SPFx for Teams tabs means no back-end hosting or Azure set-up. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on February 18, 2021.

Demo Presenter: Marcin Wojciechowski (Valo Intranet) | @mgwojciech

Supporting materials:
• Repo – pnp-teams-demo | https://github.com/mgwojciech/unit-te...
• Repository - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-contr...
• Component Library - @fluentui/react-northstar | https://fluentsite.z22.web.core.windo...
• Repo – SharePoint Browser Utilities | https://github.com/mgwojciech/sp-brow...
• Blog - Serve and debug Teams SPFx app from localhost | https://mgwdevcom.wordpress.com/2020/...

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos


Watch video Streamline SPFx development in Microsoft Teams with easy debugging and reusable controls online without registration, duration hours minute second in high quality. This video was added by user Microsoft Community Learning 04 March 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 683 once and liked it 10 people.