Skip to content
Skip to content
Menu
A cup of dev
  • Home
  • About
  • Contact
  • Books and ink
A cup of dev

How to deploy your SPfx solution using PnP powershell

By Eli H. Schei on Tuesday, 16 March 2021, 21:00Monday, 15 December 2025, 8:23

Related blogposts (updated desember 2025)

  • 1
    Create an Entra ID App Registration for Interactive Login with PnP PowerShell When Working with SPFx Solutions
  • 2
    Package and deploy SPfx solutions using PnP PowerShell (updated version, including handling SPfx 1.22)
Prerequesites:

You need to have the PnP Powershell module installed to use the pnp powershell commands used in this blogpost.

If you just want to see the complete list of commands used you can jump directly to the last section.

The first time I tried to deploy my SPfx solution using PnP powershell I had such a hard time. Not because it’s really that difficult, but because I found it hard to navigate all the different documentation and figure out the exact steps I needed to take. In this blogpost I cover the steps you need to deploy your SPfx solution using PnP powershell. It also covers how to update a solution that have allready been deployed, and how to make your solution available tenant wide.

If you would rather deploy your solution manually by drag and drop it into the app catalog – this article in the Microsoft Docs covers it.

App catalog

The destination for your SPfx solutions is called the “App catalog”. There can only be one App Catalog site collection for your organization*. A tenant admin must create this before you can deploy your solutions, Microsoft Docs covers how to do so in this article.

*It is possible to create Site specific app catalogs, but the solutions deployed there will not be available in any other Site collections. It could be a good solution for testing the app though.

If you don’t know if there’s allready an App catalog in your tenant, you can connect to your tenant and use the command “Get-PnPTenantAppCatalogUrl”. If there is an existing App catalog this command will return its URL. If nothing is returned – there is no App catalog.

Connect-PnPOnline "yourtenantURL" -Interactive

Get-PnPTenantAppCatalogUrl

Greate a .sppkg file

The first thing you need to do is get your solution ready for deployment. To create a .sppkg file you run the commands listed below – from the directory of your solution. After running these commands you can find your .sppkg file inside the SharePoint/Solutions folder.

gulp build
gulp bundle --ship
gulp package-solution --ship

Deploy your solution to the App Catalog

If you allready know the URL for the tenant App catalog use that URL to connect to your tenant.

  Connect-PnPOnline "appcatalogurl" -Interactive

If you’re not sure about the App catalog URL you can connect to your tenant and create a variable to hold the appcatalog connection.

Connect-PnPOnline "yourtenantURL" -Interactive

$appcatalogURL = Get-PnPTenantAppCatalogUrl

$appCatConnection = Connect-PnPOnline $appcatalogURL -ReturnConnection -Interactive

When you have the App catalog connection you are ready to deploy your solution.

Tip, navigate into the solution folder before you run the Add-PnPApp cmlet, then you don’t have to worry about the path to the sppkg file, because you are allready there.

<# If you connected directly to the app catalog remove the "-Connection $appCatConnection".  #> 

Add-PnPApp -Path "./project-wp.sppkg" -Connection $appCatConnection -Publish 

Make the solution available tenant wide

To make the app available on all sites in the tenant you can use the “SkipFeatureDeployment” parameter.

Note: Webparts that are deployed centrally will be automatically updated if the solutions .sppkg file is updated. But for solutions that contains site extensions there might be duplicate entries in the Tenant Wide Extensions on update.

Add-PnPApp -Path "./project-wp.sppkg" -Connection $appCatConnection -Publish -SkipFeatureDeployment

Update exisiting app

You update the app the same way that you added it, but you also add the -overwrite parameter. As the name sugests this will overwrite the app if it already exists in the app catalog.

Add-PnPApp -Path "./project-wp.sppkg" -Publish -Overwrite

Summary

In this blogpost I showed you how to use PnP powershell to deploy your SPfx solution.

Below are the complete list of commands used throughout this article.

<# If you know the URL of your App Catalog #>
Connect-PnPOnline "appcatalogurl" -Interactive


<#If you do not know the URL of your App Catalog #>
Connect-PnPOnline "yourtenantURL" -Interactive


<# Get App catalog URL #>
$appcatalog = Get-PnPTenantAppCatalogUrl

<# Use the URL to get a connection to the app catalog #>
$appCatConnection = Connect-PnPOnline $appcatalog -ReturnConnection -Interactive


<# Add the app to your catalog.
Use -SkipFeatureDeployment to centrally deployed the solution across the tenant.
Use -Overwrite to update an exisiting solution. #> 
Add-PnPApp -Path "./project-wp.sppkg" -Connection $appCatConnection -Publish -SkipFeatureDeployment -Overwrite

Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below. 🙂

Thank you for reading, and happy coding!

/Eli

Share this:

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X

Post navigation

Enable sideloading of apps in Microsoft Teams
How to create multiple profiles for Windows Terminal

4 thoughts on “How to deploy your SPfx solution using PnP powershell”

  1. Pingback: 5 must have extensions when working with SharePoint Framework (SPfx) - A cup of dev
  2. lucho1970 says:
    Thursday, 4 May 2023, 12:02 at 12:02 pm

    How do you now add it to the site using PowerShell? It is deployed, but not available until I add the app from the site contents. I want that automated as well. Thanks!

    Loading...
    Reply
    1. Eli H. Schei says:
      Friday, 5 May 2023, 7:33 at 7:33 am

      You can use Install-PnPApp to make it available on a site. See the documentation here: https://pnp.github.io/powershell/cmdlets/Install-PnPApp.html
      Hope this helps!

      Loading...
      Reply
  3. Pingback: Building Apps for Microsoft Teams: Empowering Collaboration with Custom Solutions - A cup of dev

Leave a ReplyCancel reply

Eli H. Schei

I'm a front-end developer who mainly work in the Microsoft 365-sphere. As a developer I read a lot of blogs. And in my experience I can read multiple different blogposts about exactly the same topic, and only one of them makes sense to me. Therefore I’m adding my voice to the mix, and hopefully one of my blogposts will be the one that makes sense of a topic for you. You can learn more about me here.

Recent Posts

  • Package and deploy SPfx solutions using PnP PowerShell
  • Create an Entra ID App Registration for Interactive Login with PnP PowerShell When Working with SPFx Solutions
  • How to create columns in Dataverse using PowerShell
  • React in ListViewCommandSet – how to fix the “Cannot read properties of undefined (reading ‘id’)” error
  • How to Get Site-ID with Graph Explorer (and other SharePoint info)

Categories

  • Azure
    • Azure CLI
    • Azure functions
  • Level
    • Beginner
    • Intermediate
  • Microsoft 365 Development
    • Microsoft Authentication Library
    • Microsoft Graph
    • Microsoft Teams
    • PNP powershell
    • SharePoint Framework
    • SharePoint Online
  • Power Platform
    • Dataverse
    • PowerApps
      • PowerApps Component Framework
  • Tech Lead
  • Web development
    • Accessibility
    • Soft skills
    • Tips and tricks

Tags

accessibility app permissions ARIA azure Azure CLI azure functions Content creation custom themes dataverse Entra ID favorites git github ListViewCommandSet M365 CLI M365 development MS Graph PCF PnPjs PnP powershell power apps PowerApps Component Framework powershell quicktip react resources SharePoint Online Sideloading SPfx Teams teams app dev Teams apps Tech lead tools wcag webdev Windows terminal
©2026 A cup of dev | WordPress Theme by SuperbThemes.com
%d