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

In this article, you will learn 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

    How To Create An App Page Using SharePoint Framework In SharePoint Online Modern Site
  1. Once the solution is created, type the following command to open the code in Visual Studio Code.


  1. Navigate to src/webparts/<solutionname>/<solutionname>WebPart.manifest.json and update the following value { "supportedHosts": ["SharePointFullPage"],} as shown in the following screenshot.

    How To Create An App Page Using SharePoint Framework In SharePoint Online Modern Site
  1. Type the following command to build the solution.

    gulp build
  1. Type the following command to bundle the solution.

    gulp bundle –ship
  1. Type the following command to package the solution.

    gulp package-solution –ship
  1. Package file is created in <solutionname>/sharepoint/solution/<solutionname>.sppkg.
  2. Go to SharePoint tenant app catalog site and upload the package file.
  3. Deploy the solution.

    How To Create An App Page Using SharePoint Framework In SharePoint Online Modern Site
  1. Navigate to modern site.
  2. Click on Add an app and add the SPFx app.
  3. Go to the homepage of the site, click New -> Page.

    How To Create An App Page Using SharePoint Framework In SharePoint Online Modern Site
  1. You can see a new tab named Apps. Select Apps and SPFx app that was created. Click "Create Page".

    How To Create An App Page Using SharePoint Framework In SharePoint Online Modern Site
  1. Enter the title for the page and click "Save".

    How To Create An App Page Using SharePoint Framework In SharePoint Online Modern Site
  1. 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.