Publish an SPPKG file to SharePoint Online

guidozam

Guido Zambarda

Posted on April 11, 2024

Publish an SPPKG file to SharePoint Online

Disclaimer: This is an article meant for those who are starting developing custom solutions for SharePoint Online, if you already published any SPPKG file save your time and read some more useful article like granting API permissions requests for SPFx

If you’re still reading I guess you’re interested in this article so let’s start!

When developing a custom SharePoint Framework solution (and if you’re wondering how to get started check out this article) at some point you will need to deploy your solution which will be a file with the SPPKG extension (which is a zip of some files and folders of your solution) and to deploy it you need to perform some steps:

  • Open the SharePoint Online admin center
  • Open the Manage apps
  • Deploy your solution

Let’s see in more details what are those steps.

Open the SharePoint Online admin center

To open the SharePoint Online admin center you can proceed in various fashions:

  • From one of the Microsoft 365 applications using the application launcher.
  • Go directly to the Microsoft 365 admin center with the following link https://admin.microsoft.com/.
  • Writing directly the URL of the SharePoint Online admin center , which will be https://{your tenant name}-admin.sharepoint.com
Using the Application Launcher

In every Microsoft 365 application, on the top left corner, you’ll find the App launcher (which is the square composed by dots):

Clicking it will display various options:

Resist the urge to click on the SharePoint option and click instead on the Admin option, from here you can proceed with the following section.

Accessing directly to admin.microsoft.com

If you want to access the Microsoft 365 admin center to reach the SharePoint Online admin center you will need to perform a couple of clicks in order to achieve that.

Once that you entered the Microsoft 365 admin center (https://admin.microsoft.com/), on the left, you will find the navigation menu:

Clicking on “Show all” will display more options, some of which are the available admin centers, in my case:

Clicking on “SharePoint” will take you to the SharePoint Online admin center.

Open the Manage apps page

From the SharePoint Online admin center , the navigation menu will be something like the following:

Click on More features , it will open a page where you can see more available options, the following is a partial visualization of the available options:

Open the Apps section, that will bring you to the Manage apps page.

Deploy your solution

To deploy the SPPKG file in the Manage apps page you can proceed in two ways:

  • Click on the Upload button.
  • drag and drop the file in the table area.

Once the file is uploaded you will be greet by the following panel:

Where you can choose if you want to:

  • Just enable the application, you will have to add the application manually to the site/s where you want to use it.
  • Enable the application and add automatically to all sites. With this selection you can also choose to automatically add the application to Teams.

NB: in the previous screenshot there is also a checkbox which reads Add to Teams and that is present whenever your solution is suitable to be added to Teams, if your solution does not support Teams it will not be displayed.

Once the deployment is finished you will see the following result:

Using APIs

If you’ve specified the webApiPermissionRequests inside the package-solution.json the panels are a bit different, in the first one you will have the required permissions listed:

Also, once the application has been enabled, you will be prompted to approve the API request:

If you want to know more about approving the API request you can check my previous article.

Conclusion

Publishing an SPPKG file is an easy and straightforward task, probably it’s better to bookmark the Manage apps , don’t you think?

Hope this helps!

💖 💪 🙅 🚩
guidozam
Guido Zambarda

Posted on April 11, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related