How to deploy your SharePoint framework (SPfx) solution using PnP powershell
Tags: spfx, microsoft, microsoft365dev, sharepoint
Published: 2021-05-28 08:52:08

#### Prerequesites:
> You need to have the [PnP Powershell module installed](https://docs.microsoft.com/en-us/powershell/sharepoint/sharepoint-pnp/sharepoint-pnp-cmdlets?view=sharepoint-ps) 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.](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page)_

## 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](https://docs.microsoft.com/en-us/sharepoint/use-app-catalog).

*_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.

```powershell
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.

```shell
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.
```shell
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.
```shell
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._

```shell
<# 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._
```shell
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.
```powershell
<# 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](https://twitter.com/acupof_dev) 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