Deployed app customizer sppkg doesn't show up in site collection's app catalog

Question

Following the documentation to create an app customizer and bundled with no changes to the code from the yo generator code base (@microsoft/generator-sharepoint was v1.3.4).

The debug mode ?loadSPFX=true method of having the code execute works a treat from my localhost server code, however, the steps to deploy the app to the app catalog don't seem to work.

After deploying the .sppkg file built from both a debug (localhost:4321 served) location, and a --ship (CDN served) location, the App Catalog reports the app as deployed with no errors, but no app shows up in any of the tenant's site collections.

When performing the steps from the 'deploying to sharepoint' page, I noticed the yo scaffolded folder structure didn't include the ./sharepoint/assets/elements.xml file. Nor did the ./config/package-solution.json file include any "features" node. I manually created those, and I think I have the GUIDs right, but I'm not entirely sure.

My App Customizer manifest file:

{
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-extension-manifest.schema.json",
"id": "a06b5d7c-d3a4-448b-8863-f9b0c71f986a",
"alias": "MegaMenuApplicationCustomizer",
"componentType": "Extension",
"extensionType": "ApplicationCustomizer",
// The "*" signifies that the version should be taken from the package.json
"version": "*",
"manifestVersion": 2,
// If true, the component can only be installed on sites where Custom Script is allowed.
// Components that allow authors to embed arbitrary script code should set this to true.
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false
}

My package-solution.json file:

{
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
    "name": "App Customiser SPFx Package",
    "id": "4c152c4b-bfcc-46bb-8319-f08ef70ad7e7",
    "version": "1.0.0.3",
    "skipFeatureDeployment": true,
    "features": [
    {
        "title": "Application Extension - Deployment of custom action.",
        "description": "Deploys a custom action with ClientSideComponentId association",
        "id": "295fcd3d-0bad-4693-8ba9-71c8eb373f5d",
        "version": "1.0.0.3",
        "assets": {
        "elementManifests": [
            "elements.xml"
        ]
        }
    }
    ]
},
"paths": {
    "zippedPackage": "solution/spfx-package-extensions-appcustomiser.sppkg"
}
}

My elements.xml

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction 
        Title="MegaMenuApplicationCustomizer"
        Location="ClientSideExtension.ApplicationCustomizer"
        ClientSideComponentId="a06b5d7c-d3a4-448b-8863-f9b0c71f986a"
        ClientSideComponentProperties="{&quot;Top&quot;:&quot;Top area of the page&quot;,&quot;Bottom&quot;:&quot;Bottom area in the page&quot;}">
    </CustomAction>
</Elements>

Answer 1

Just answering my own question - turns out I had the "skipFeatureDeployment" set to true in my package-solution file here. Feature deployment is required when packaging SPFx app customisers via the app store model.

Answer 2

please do these changes : Follow below two steps to do that: Step 1: make sure skipFeatureDeployment is set to false in config/package-solution.json file Step 2 : remove clientsideinstance.xml from elementMenifest in features section in package-solution because we do not need do deploy automatically.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "helloword-app-customizer-client-side-solution",
    "id": "c60ebbe7-9313-4200-b9fb-a1198e6e0d20",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "skipFeatureDeployment": true,
    "isDomainIsolated": false,
    "features": [
      {
        "title": "Application Extension - Deployment of custom action.",
        "description": "Deploys a custom action with ClientSideComponentId association",
        "id": "ca10eae0-ed55-400b-8ead-9d5940ed91a7",
        "version": "1.0.0.0",
        "assets": {
          "elementManifests": [

            "element.xml"
          ]
        }
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/helloword-app-customizer.sppkg"
  }
}

You can edit sharepoint/assets/element.xml and pass your properties. Bundle, Package and deploy solution in tenant.

Now go to the site where to you want to add extension. Click new >> App and add your newly created app. Once app is added your extension will be available in the site. Read this article till the end. https://tutorialsinhand.com/tutorials/sharepoint-framework-spfx-tutorial/sharepoint-framework-extensions/deploy-spfx-extensions.aspx