Getting started with SPFx – Building your first extensibility for Microsoft 365
SharePoint Framework (SPFx) is an extensibility model for Microsoft 365 enabling developers to build different kinds of extensibility for Microsoft Viva, Microsoft Teams, Outlook, Microsoft 365 app (Office), and SharePoint. SPFx has multiple benefits like automatic Single Sign On, automatic hosting in the customer tenant, reuse same code across the service and industry standard web stack tooling.
- You got me curious – how would I start using SPFx – how to get started?
- That is a great question. Let’s reference our getting started documentation and tutorial video series on learning how to get started
This blog post is part of a month long SPFx series for January 2023. Each business day we’ll publish a new blog post covering different aspects of the SPFx.
- Previous blog post in this series - What is SPFx? – An extensibility model for Microsoft 365
- Next blog post in this series - Getting started with SPFx extensions for SharePoint Online
SPFx – the basics of development
Here are the steps to get started on building SPFx solutions within Microsoft 365:
- Subscribe to Microsoft 365 Developer program to get a free development tenant which you can use for building your custom solutions
- Install the SPFx development tooling based on the documentation
- Scaffold your first SPFx solution using the SPFx Yeoman generator
- Develop, test and debug the solution in a tenant based on your objectives
One of the coolest things in the SPFx is its ability to package solutions as automatically hosted packages in the tenant. This means that when the solution is ready to be used, you can simply package the solution to a specific package type, which can be easily deployed to any tenant in the world.
You are production ready in a matter of minutes with the automatically hosted code without any need to figure out a location to host your code in Microsoft Azure or in other location in cloud.
Step-by-step tutorials on getting started
Following 6 videos is a great baseline series on getting started with SPFx. This series focuses on building your first web part, which is a client-side component with UX elements. Web part is a baseline component for UX elements shown in SharePoint and it’s also the same component type which can be used to be exposed in Microsoft Teams, Outlook or in Microsoft 365 app (Office). We’ll cover the differences on the different hosts within upcoming blog posts within this series.
Setting up your Microsoft 365 tenant
Set up development environment
Build your first SharePoint client-side web part (Hello World part 1)
Connect your client-side web part to SharePoint (Hello World part 2)
Deploy your client-side web part to a SharePoint page (Hello World part 3)
Host your client-side web part from Microsoft 365 CDN (Hello World part 4)
Frequent questions around getting started with SPFx
Which Node version is supported by SPFx?
This depends on the used version. In the time of writing this blog post, the supported version would be Node 16.x. Version is updated as part of the new version of the SPFx. You can always find the latest status from the official documentation.
As SPFx is also used by the Microsoft engineering team to build the native experiences in the Microsoft 365, updating to the latest Node can take a while, as the native out-of-the-box experiences will need to be updated for the latest version. This is why the supported Node version might be a bit behind the latest released version.
What’s the most common issue with getting started?
Most common issue is a mismatch of the environment with the supported technologies, so for example you are using too new Node version vs what’s supported by the SPFx tooling.
I’m having challenges with the dev certificate installation
Notice that you’ll need to first scaffold a project and after that you can execute the ‘gulp dev-cert’ command to create the developer certificate for hosting the code locally. This is needed so that the Microsoft 365 hosted online workbench can request the locally hosted files with https.
I still can’t make things work – where to get help?
Please use the sp-dev-docs issue list for any questions around SPFx development. This is the GitHub repository where we store all SPFx dev documentation, and we use it also for tracking any issues from the customers and partners. Microsoft engineering and our MVPs are helping with the questions in this location.
Here are some initial references to get started with the SPFx in your development. Please do provide us with feedback and suggestions on what is needed to help you to get started with the SPFx development for Microsoft 365.
- SPFx documentation – https://aka.ms/spfx
- Issues and feedback around SPFx - https://aka.ms/spfx/issues
- Microsoft 365 Platform Community – https://aka.ms/m365/community
- Public SPFx and other community calls – https://aka.ms/m365/calls
- These calls are for everyone to take advantage to stay up to date on the art of possible within Microsoft 365 and to provide guidance for beginners and more advance users
- SPFx samples in the Microsoft 365 Unified Sample gallery – https://aka.ms/m365/samples
We will provide more details on the different options and future direction of the SPFx in upcoming blog posts. This post focused on the getting started steps with SPFx - more details coming up with this series with one post within each business day of January 2023.