How to deploy your 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. 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.
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
The post How to deploy your SPfx solution using PnP powershell first appeared on A cup of dev.