SPFx Deployment - Failing Gulp package-solution — ship

Question

Update: I was aiming for extenal CDN and I uploaded the artifacts successfully after setting "includeClientSideAssets": false. Still even after adding my app in app Catalog with no error, adding the app on my site I don't see the custom action on the document library.

I even tried using PnP PowerShell to add to UserCustomActions. Still no go..

Quick reply will be helpful.

---

I am trying to deploy command set extension (SPFx) into my tenant site. The extension works perfectly in debug mode.

In order to deploy it I did the below and even after numerous trials don’t see it in the command bar/context menu for my document library.

1. Gulp bundle –ship it was successful.

2. “Gulp package-solution –ship” fails and gives me error. Please see below screen shot.

3. Regardless of the above warning as it doesn’t seem valid since I am hosting artifacts from my office cdn, I deployed the sppkg file into App Catalog for my tenant.

4. I created a new site and added the deployed app, still I don’t see my custom action.

PS: I was able to deploy app customizer extension exactly the same way. and face this issue only with ListView Command-Set Extension. Also I have enabled Office 365 CDN and hosted the artifacts for the extension there along with uploading the sppkg into App catalog.

Answer 1

You confused with different deployment options. There are different ways to store your client-side assets (.js files, images, etc.):

1. From app catalogue urls
2. Office 365 CDN
3. External CDN

From app catalogue urls

If you haven't activated office 365 CDN feature, then it will be the default location for your files. In that case in package-solution.json you should have "includeClientSideAssets": true telling SPFx that you want to include your assets inside package and host in SharePoint

How to upload your assets? - They are uploaded automatically when you add your app into an app catalogue.

Office 365 CDN

If you have activated Office 365 CDN feature, then your assets will go to a special folder at Office 365 CDN. There are two prerequisites: you have "includeClientSideAssets": true in your package-solution.json and your cdnBasePath in write-manifests.json is exactly "cdnBasePath": "<!-- PATH TO CDN -->" - you shouldn't change anything here.

How to upload your assets? - They are uploaded automatically when you add your app into an app catalogue.

External CDN

If you want to host at external CDN (or at the specific path of Office 365 CDN as in your example) you should modify cdnBasePath to point to root folder with your client-side assets. In that case, you also should change "includeClientSideAssets": false

How to upload your assets? - On your own. That's the key point here. As soon as you modified cdnBasePath you should take care of static assets deployment. That's the exact reason why it doesn't work for you because you haven't deployed your files to CDN. After bundle and package, you should open /temp/deploy and copy all files to your CDN folder.

Also please make sure that package-solution.json has features node with your elements.xml file, because it actually activates your extension on the site.

Good reading here and Publish SharePoint Framework client-side web parts to Office 365 public CDN

Answer 2

One thing you might be missing is the binding of the extension to the target site.

To do that , you can run the below PS script using PnP PowerShell:

$credentials = Get-Credential
Connect-PnPOnline "https://<your-tenant>.sharepoint.com/sites/<your-site>" -Credentials $credentials

$context = Get-PnPContext
$web = Get-PnPWeb
$context.Load($web)
Execute-PnPQuery

$ca = $web.UserCustomActions.Add()

$ca.ClientSideComponentId = "67fd1d01-84e8-4fbf-85bd-292820ddbf32" // replace it with your value
$ca.ClientSideComponentProperties = ""
$ca.RegistrationId="101"
$ca.RegistrationType="DocumentLibrary"
$ca.Location = "ClientSideExtension.ListViewCommandSet"
$ca.Name = "SPFxListViewCommandSet"
$ca.Title = "List View CommandSet"
$ca.Description = "Custom action for SPFxListViewCommandSet"
$ca.Update()

$context.Load($web.UserCustomActions)
Execute-PnPQuery

You can find the ClientSideComponentId guid value from the sharepoint > assets > elements.xml file which you can replace in the above script.

Modified from - RegionsFooterProvisionCustomizer.ps1

Answer 3

1. You need to correct your config files according to the error message. If you are hosting the assets in your own cdn, includeClientSideAssets should be set to false.

2. As Gautam Sheths answer incicates - you also need to provide a way for the feature to be activated on your site. Reference this guide to see an example for when the app is not set to tenant wide deployment: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/serving-your-extension-from-sharepoint
   If it is set to tenant wide - you need to use a script to manually activate it (or write it into a site script / provisioning template.)