SharePoint Framework

How to install your SPFx solution to SharePoint?

    You have developed or got a SPFx solution, a Web Part or an extension but you do not know how to deploy and install it on your environment? This post will explain you the different ways to deploy and install this kind of solution quickly and easily on your SharePoint environment.

    App Catalog

    Once you have built or got a SPFx package (file with .sppkg extension), to allow all users of a site collection or all users of you SharePoint environment (whole Tenant) to use it, you have to add this one in an App Catalog.

    The first thing you have to know is, who needs to have access to it. If all users in your organization need to habe access to it, the best choice should be to deploy the component into the Tenant App Catalog. On the opposit, if only a couple of users needs to have access to it, you should deploy the component on one or several sites collections App Catalog that need it.

    Tenant App Catalog

    The first thing you have to know is, whatever the scope of visibility of your solution (Tenant or Site collection) you chose, you have to create a Tenant App Catalog and have sufficient rights to access to it and manage the content (apps).

    If you do not know if a Tenant App Catalog is already existing, you can directly check from the SharePoint API URL :

    https://yourdomain.sharepoint.com/_api/SP_TenantSettings_Current

    the value is available from the XML node <d:CorporateCatalogUrl><d:CorporateCatalogUrl>

    or you can use PnP PowerShell cmdlet:

    Get-PnPTenantAppCatalogUrl

    or you can use Office 365 CLI command line:

    spo tenant appcatalogurl get 

    Site Collection App Catalog

    If you chose this solution to deploy your package, you assume you indeed have a Tenant App Catalog and App Catalog on the target site collection.

    To create a site collection App Catalog, there is no other way than use PowerShell. You can use SharePoint PowerShell manager cmdlet:

    Add-SPOSiteCollectionAppCatalog -Site https://yourdomain.sharepoint.com/sites/targetsitecollection

    or PnP PowerShell cmdlet:

    Add-PnPSiteCollectionAppCatalog -Site https://yourdomain.sharepoint.com/sites/targetsitecollection

    or Office 365 CLI command line:

    spo site appcatalog add --url https://yourdomain.sharepoint.com/sites/targetsitecollection
    Note: the user account has to be SharePoint Administrator at least to create a site collection App Catalog

    Install

    Note: if your solution provides a deployment script, you should first take into account the documentation written about it

    Once:

    • your App Catalog is ready
    • you know the URL
    • you can access it with sufficient permissions

    you can follow the steps below:

    1. Get the .sppkg file (by building the solution or downloading the package directly if provided)

    Manually

    1. Go to your site collection (Tenant App Catalog or target site collection)
    2. Open the Apps for SharePoint library. The URL of the library is: https://yourdomain.sharepoint.com/[sites/teams]/yoursitecollection/AppCatalog/Forms/AllItems.aspx
    3. You can drag and drop the .sppkg file or click on Files › Upload Document
      LsOnline-SPAppsInstall-DragAndDropSppkg
    4. Once uploaded, a dialog will appear. This dialog will allow you to deploy your solution after clicking on Deploy.
      LsOnline-SPAppInstall-DeployModalDialog

      Note: some solutions can be deployed and installed directly on all site collections in your Tenant if you check the checkbox "Make this solution available to all sites in the organization" (this option is only available if the package-solution.json has the parameter skipFeatureDeployment with the value at true)

    If your solution was deployed and installed on all sites in your organization, then you can skip the next step.

    1. Go to the SharePoint site collection that needs your solution. Add an app (from the gear located at the Microsoft 365 rubban or from the Site Contents › New › App) and click on your solution
      LsOnline-SPAppInstall-AddInstanceToSC
      Once installed, you can see the instance of your solution from the Site Contents
      LsOnline-SPAppInstall-CheckInstanceFromSiteContents

    Now, you solution is ready to use. You have done 👍🏻

    Programmatically

    1. Connect to the site collection that hosts your App Catalog with the PnP PowerShell cmdlet:

      Connect-PnPOnline -Url https://yourdomain.sharepoint.com/sites/yoursitecollection
      

      or with Office 365 CLI command line:

      spo login
      
    2. Upload the package the the library with the PnP PowerShell cmdlet:

      Add-PnPApp -Path ./yourapp.sppkg
      

      or with the Office 365 CLI command line:

      spo app add --filePath ./yourapp.sppkg --appCatalogUrl https://yourdomain.sharepoint.com/sites/yoursitecollection
      
    3. Deploy the package with the PnP PowerShell cmdlet:

      Publish-PnPApp -Identity 00000000-0000-0000-0000-00000000000 -SkipFeatureDeployment
      

      or with Office 365 CLI command line:

      spo app deploy --id 00000000-0000-0000-0000-00000000000 --skipFeatureDeployment
      

      Note: you can find the ID of your solution on the package-solution.json file

      Note: the parameter skipFeatureDeployment works only if the package-solution.json of the package has value at true

    If your solution was deployed and installed on all sites in your organization, then you can skip the next step.

    1. Install your solution on the site collection(s) that need it with the PnP PowerShell cmdlet:
      Connect-PnPOnline -Url https://yourdomain.sharepoint.com/sites/targetsitecollection
      Install-PnPApp -Identity 00000000-0000-0000-0000-00000000000
      
      or with Office 365 CLI command line:
      spo app install --id 00000000-0000-0000-0000-00000000000 --siteUrl https://yourdomain.sharepoint.com/sites/targetsitecollection
      

    Now, your solution is ready to use. You are done 👍🏻


    Developers

    If your organization has deployed a SPFx component into the Tenant App Catalog, you can even use the site collection App Catalog to try your component in the same environment. The site collection App Catalog takes priority over the Tenant App Catalog.

    Hoping this post will help you 😉