HomeSPFXDeploy SPFX Extensions Globally using Powershell

Deploy SPFX Extensions Globally using Powershell

Edited : 09 12 2017

You have developed your SPFX Extension, you need to deploy it to multiple sites or sites collections. The programming approach is preferred instead of feature deployment.

The following code sample deploys a placeholder custom action (for this example it was a mega menu) to multiple sites. It is inspired from YPCode Blog article

Edit : 11 05 2018 – Microsoft will add an option to deploy an SPFX Extension globally, so such script might be obsolete.

Alternatives

There is an npm extension recently created SPFx extensions CLI from Vardhaman Deshpande. It doesnt allow to apply on a list of site collection but it could be used instead of pnp cmdlets.

Pre requisite

  1. in package-solution.json
    "skipFeatureDeployment": true
  2. Install SharePoint PNP Powershell Online
  3. Create the credential in credentials manager named as “tenantCred” for your tenant using this method.

Code Explanation

Deploy the custom action to every sites inside a site collection.

Pre requisite understanding :

  • It will asked the password during deployment.

Code

############################################################
# Set here the URL of your site
$targetWebUrl = "https://tenant.sharepoint.com/sites/dev/"
# Set the name of the custom action here 
$customAction = "MegaMenu"
# Id of your extension.
$componentId = "a861c815-e425-416d-9520-04bcdf557e27"
############################################################

SPCsomHelper-IncludeCSOMModuleOnline

$sPassword = Read-Host -Prompt "Enter password" -AsSecureString
$ctx = SPCsomHelper-InitCtxForSPOnline "https://tenant.sharepoint.com/sites/dev/" "admin@tenant.com" $sPassword

$web = $ctx.Web;
$ctx.Load($web);
$subwebs = $web.Webs;
$ctx.Load($subwebs);
$ctx.ExecuteQuery()

foreach ($subweb in $subwebs) {    
      Write-Host -ForegroundColor Yellow "Activating on " $subweb.Url
      Connect-PnPOnline $subweb.Url -Credentials tenantCred
      Add-PnPCustomAction -Name $customAction -Title $customAction -Location "ClientSideExtension.ApplicationCustomizer" -ClientSideComponentId $componentId -ClientSideComponentProperties "{}"
      Write-Host -ForegroundColor Green "Activated on " $subweb.Url
}

function SPCsomHelper-InitCtx
{
    param($sSiteUrl, $sUserName, $sPassword)
   
    #SPO Client Object Model Context
    Write-Host -ForegroundColor Yellow "    Website is " $sSiteUrl
    $spoWebCtx = New-Object Microsoft.SharePoint.Client.ClientContext($sSiteUrl)
    $spoCredentials = New-Object System.Net.NetworkCredential($sUserName, $sPassword)
    $spoWebCtx.Credentials = $spoCredentials

    return $spoWebCtx;
}

function SPCsomHelper-IncludeCSOMModuleOnline() {   
    $sCSOMRuntimePath = "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\ISAPI\Microsoft.SharePoint.Client.dll"    
    $sCSOMPath = "C:\Program Files\SharePoint Online Management Shell\Microsoft.Online.SharePoint.PowerShell\Microsoft.Online.SharePoint.Client.Tenant.dll"            
    Add-Type -Path $sCSOMPath
    Add-Type -Path $sCSOMRuntimePath
}

More readings suggestions

Build a breadcrumb using SPFx extensions by Joao Ferreira (deploy to cdn, create bread crumb)

 

- Advertisement -

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

CONNECT FOR MORE CONTENT

DO NOT MISS THOSE ARTICLES

Recent Comments