How to deploy your SharePoint framework (SPfx) solution using PnP powershell

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. So I decided to share these steps with you. I also cover 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.

Create or find your 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 

Summary

In this articleI 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