How to install your SPFx solution to SharePoint

This article is for Office 365 SharePoint Environment.

Installation Steps

Upload SPFx to Tenant App Catalog in Office 365

Before We Begin

Make sure you have completed the following steps before you proceed with this article:

  • To install a custom app to your Office 365 tenant you will need SharePoint admin permissions. If you don’t have the admin permissions, please contact your SharePoint admin.

Step 1. Click the App Launcher Icon on the top left of your SharePoint Intranet site:

Step 2. Select Admin

Step3. Click … Show all:

Step 4. Select SharePoint:

Step 5. Click More features:

Step 6. In the Apps section, click Open:

Step 7 If you have created an App Catalog before, you will see this:

Otherwise, SharePoint will take a few minutes to create a new App Catalog for you:

Note: since May 2022, Microsoft has automated App Catalog creation in Office 365.However, if by any reason you see the old experience in your tenant, suggesting manual App Catalog setup, please check this article: Set Up the Tenant App Catalog in Office 365.

After it is done, you will see this. Click Got it:

And finally, you will arrive at your freshly created App Catalog site:

Step 8 Click Upload. Then select the SPFx file.

Step 9: Enable the installed app to add and use on all sites.

Add SPFx to SharePoint Modern Page in Office 365

  1. Go to the page where you want to add a web part.
  2. If you do not see the site page that you want, click Site contents on the Quick Launch bar, in the list of contents, click Site Pages, and then click the page that you want.
  3. If the page is not already in edit mode, click Edit at the top right of the page.
  4. Hover your mouse above or below an existing web part and you’ll see a line with a circled +, like this:
    Plus sign for adding web parts to a page
  5. Click + and you’ll see a list of web parts to choose from. To easily find the web part you’re looking for, start typing in the Search box.

Activate Licence

Click the Edit web part Web part edit button icon, and in the toolbox on the right

  • Licence Key – Enter the Licence Key you were given.