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 app page using SPFx

1. Open 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/webparts/<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. Package file is created in <solutionname>/sharepoint/solution/<solutionname>.sppkg.
9. Go to SharePoint tenant app catalog site and upload the package file.
10. Deploy the solution.
    
    
    

11. Navigate to modern site.
12. Click on Add an app and add the SPFx app.
13. Go to the homepage of the site, 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.