Microsoft 365 Community / SharePoint Framework Tutorials

Video showing in practice how to setup your development environment for SharePoint Framework development. This video is using Windows 10 VM hosted in Azure as the demonstration environment.

⬅️ This tutorial assumes that you have completed following steps - https://www.youtube.com/watch?v=ijaJgc3J-iE
➡️ Next steps are in following video - https://www.youtube.com/watch?v=6WTtjXP5yW4

You can find written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment?WT.mc_id=m365-15744-cxa

April 2022 version using SharePoint Framework 1.14.

• Presenter - Vesa Juvonen (Microsoft) | @vesajuvonen

SharePoint Framework (SPFx) is the easiest professional developer option to build enterprise extensibility for Microsoft Teams, Microsoft Viva and SharePoint. There are tens of millions of monthly active users (MAU) for custom extensibility in Microsoft 365 built with SPFx.

Supporting materials:
• Tutorial documentation - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment?WT.mc_id=m365-15744-cxa
• More details around SharePoint Framework - https://aka.ms/spfx

Learn more:
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

Sharing is caring! You are awesome! 🧡

Video showing in practice on how to get a free Microsoft 365 tenant and how to apply the needed configuration for enabling it to be used for SharePoint Framework (SPFx) development.

➡️ Next steps are in following video - https://www.youtube.com/watch?v=Cxx9MdjEiEw

You can find written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant?WT.mc_id=m365-15744-cxa

April 2022 version using SharePoint Framework 1.14.

• Presenter - Vesa Juvonen (Microsoft) | @vesajuvonen

SharePoint Framework (SPFx) is the easiest professional developer option to build enterprise extensibility for Microsoft Teams, Microsoft Viva and SharePoint. There are tens of millions of monthly active users (MAU) for custom extensibility in Microsoft 365 built with SPFx.

Supporting materials:
• Tutorial documentation - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant?WT.mc_id=m365-15744-cxa
• More details around SharePoint Framework - https://aka.ms/spfx

Learn more:
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

Sharing is caring! You are awesome! 🧡

This tutorial will guide you creating your first client-side web part using the SharePoint client-side development tools.

⬅️ This tutorial assumes that you have completed following steps - https://www.youtube.com/watch?v=Cxx9MdjEiEw
➡️ Next steps are in following video - https://www.youtube.com/watch?v=5M3zDpgxIMs

You can find written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part?WT.mc_id=m365-15744-cxa

April 2022 version using SharePoint Framework 1.14.

• Presenter - Vesa Juvonen (Microsoft) | @vesajuvonen

SharePoint Framework (SPFx) is the easiest professional developer option to build enterprise extensibility for Microsoft Teams, Microsoft Viva and SharePoint. There are tens of millions of monthly active users (MAU) for custom extensibility in Microsoft 365 built with SPFx.

Supporting materials:
• Tutorial documentation - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part?WT.mc_id=m365-15744-cxa
• More details around SharePoint Framework - https://aka.ms/spfx

Learn more:
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

Sharing is caring! You are awesome! 🧡

In this tutorial, we will continue with the web part project we created in the previous tutorial and modify that to use REST APIs for connecting information in SharePoint Online.

⬅️ This tutorial assumes that you have completed following steps - https://www.youtube.com/watch?v=6WTtjXP5yW4
➡️ Next steps are in following video - https://www.youtube.com/watch?v=FkFg32NSTM0

You can find written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint?WT.mc_id=m365-15744-cxa

April 2022 version using SharePoint Framework 1.14.

• Presenter - Vesa Juvonen (Microsoft) | @vesajuvonen

SharePoint Framework (SPFx) is the easiest professional developer option to build enterprise extensibility for Microsoft Teams, Microsoft Viva and SharePoint. There are tens of millions of monthly active users (MAU) for custom extensibility in Microsoft 365 built with SPFx.

Supporting materials:
• Tutorial documentation - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint?WT.mc_id=m365-15744-cxa
• More details around SharePoint Framework - https://aka.ms/spfx

Learn more:
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

Sharing is caring! You are awesome! 🧡

In this tutorial, we will deploy the client-side web part to SharePoint and see it working on a SharePoint Online page.

⬅️ This tutorial assumes that you have completed following steps - https://www.youtube.com/watch?v=5M3zDpgxIMs
➡️ Next steps are in following video - https://www.youtube.com/watch?v=N-KowN-UwTM

You can find written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page?WT.mc_id=m365-15744-cxa

April 2022 version using SharePoint Framework 1.14.

• Presenter - Vesa Juvonen (Microsoft) | @vesajuvonen

SharePoint Framework (SPFx) is the easiest professional developer option to build enterprise extensibility for Microsoft Teams, Microsoft Viva and SharePoint. There are tens of millions of monthly active users (MAU) for custom extensibility in Microsoft 365 built with SPFx.

Supporting materials:
• Tutorial documentation - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page?WT.mc_id=m365-15744-cxa
• More details around SharePoint Framework - https://aka.ms/spfx

Learn more:
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

Sharing is caring! You are awesome! 🧡

In this tutorial, we will deploy the HelloWorld assets to be hosted in the SharePoint Online. Depending on the settings in the tenant level, assets will be then automatically served from the tenant URL or from the Office 365 CDN URL. There are no changes required for developers to address this setting. Even if the Office 365 CDN would be not enabled in the tenant, all assets are automatically served without any external hosting or maintenance requirements.

This hosting is automatically handled for any component type created using SharePoint Framework, so the configuration and steps shown in this tutorial are not web part specific.

⬅️ This tutorial assumes that you have completed following steps - https://www.youtube.com/watch?v=FkFg32NSTM0

You can find written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn?WT.mc_id=m365-15744-cxa

April 2022 version using SharePoint Framework 1.14.

• Presenter - Vesa Juvonen (Microsoft) | @vesajuvonen

SharePoint Framework (SPFx) is the easiest professional developer option to build enterprise extensibility for Microsoft Teams, Microsoft Viva and SharePoint. There are tens of millions of monthly active users (MAU) for custom extensibility in Microsoft 365 built with SPFx.

Supporting materials:
• Tutorial documentation - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn?WT.mc_id=m365-15744-cxa
• More details around SharePoint Framework - https://aka.ms/spfx

Learn more:
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

Sharing is caring! You are awesome! 🧡

This tutorial will guide you in using SharePoint Feature Framework in the SharePoint Framework to provision SharePoint assets to sites when your solution is getting installed on the site.

You can find the written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/provision-sp-assets-from-package.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

In this tutorial, we will create a SharePoint Framework web part and use Microsoft Graph to get access on the user specific information - or more specifically in this scenario, we are accessing latest emails of the user.

You can find a written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

This tutorial will guide you in building a simple web part that uses one of the Office UI Fabric components, DocumentCard.

You can find the written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

In this tutorial, let's add the jQueryUI Accordion to our web part project. We will build on top of the skills from previous tutorials but will create a new web part of it.

You can find the written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!

This tutorial will guide you through on how you can use SharePoint Framework to build a custom solution, which can then be surfaced in both SharePoint and in Microsoft Teams as a tab.

You can use the same code base across Office 365 as SharePoint, Microsoft Teams or Office add-in solution.

You can find the written version of this tutorial from the following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab

January 2020 version using SharePoint Framework 1.10.

More details around SharePoint Framework from http://aka.ms/spfx

Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp

Sharing is caring!