How To Create An App Page Using SharePoint Framework In SharePoint Online Modern Site

Introduction

In this article, you will see how to create an app page using SPFx in SharePoint Online Modern Site. App Page is a full Modern page with pre-configured application content and no authoring experience – only optional configuration. End users will not be able to edit the app page using the browser.

Prerequisites

• Set up Office 365 Tenant. Click here for more information.
• Set up the development environment. Click here for more information.

Create an app page using SPFx

1. Open the Node.js command prompt.
2. Navigate to the folder to create a solution. Type the following commands to create a folder and SPFx webpart as shown in the screenshot.

   cd "<folderlocation>"
   mkdir <newfoldername>
   cd <newfoldername>
   yo @microsoft/sharepoint
   

3. Once the solution is created, type the following command to open the code in Visual Studio Code.
4. Navigate to src/web parts/<solutionname>/<solutionname>WebPart.manifest.json and update the following value { "supportedHosts": ["SharePointFullPage"],} as shown in the following screenshot.
   
5. Type the following command to build the solution.

   gulp build
   

6. Type the following command to bundle the solution.

   gulp bundle --ship
   

7. Type the following command to package the solution.

   gulp package-solution --ship
   

8. The package file is created in <solutionname>/SharePoint/solution/<solutionname>.sppkg.
9. Go to the SharePoint tenant app catalog site and upload the package file.
10. Deploy the solution.
    
11. Navigate to the modern site.
12. Click on Add an app and add the SPFx app.
13. Go to the homepage of the site, and click New -> Page.
    
14. You can see a new tab named Apps. Select Apps and SPFx app that was created. Click "Create Page".
    
15. Enter the title for the page and click "Save".
    
16. The page is created successfully.

Summary

Thus, in this article, you saw how to create an app page using SPFx in SharePoint Online Modern Site.