Develop single page experiences in SharePoint Online with SPFx web parts

Context

Recently, some people asked me how to develop full custom SharePoint Online pages with SPFx. This is possible with the single part app page which provide a great way to host SharePoint Framework (SPFx) web parts or Microsoft Teams apps into single web pages without user configuration available. Let’s have a look at this deeper now for my first article of 2021!

Single part app page

Before starting, you need to know existing limitations about this feature:

Single Part App Pages cannot be edited by end users using a browser.
Currently supports hosting only single web part or Microsoft Teams application.
End users can create new app pages using the New > Page experience available in modern sites.
Developers can change page layout programatically from normal page layout to a Single Page App Page (PnP PowerShell/CLI for Microsoft 365).
There’s no New experience in a Single Page App Page. End users can create new Article pages or Single Page App pages by using the New/page experience present in the ribbon of any modern article pages.

And now, let’s create our app page…

Expose a web part as an app page

To expose a web part as an app page, it’s pretty simple. You need to update supportedHosts value of your component manifest file as following:

  "supportedHosts": ["SharePointWebPart", "SharePointFullPage"]

Then package your solution, upload it to your tenant App Catalog and deploy it. And it’s done!

After this, when your create a new page on a site where the feature is deployed, you should see a new tab named Apps with your web part available as a single part app page when you select it.

My custom SPFx web part is available as a single part app page.

When your new page is created, you can see the web part hosted in a full page experience.

My MS Graph Agenda custom SPFx web part hosted in a single page experience.

Users can’t edit page settings but only web part settings inside the property pan like a standard web part.

Editing the page shows you web part property pan only.

Common use case

The common use case is when you want to provide a better user experience for web parts using multiple sections and controls inside them or simply to provide a full page experience when you develop a brand new feature for your site. I think this feature is a really good way to customize your SharePoint Online sites and should be considerated more often to alternate between web part and full page experiences.

Happy coding everyone!