Provision SPFx Web Parts to Classic Sites – Part 5 (additional): Run all SPFx Gulp tasks with one custom PowerShell function

After weeks full of conferences (SharePoint Conference North America and Collaboration Summit Mainz) its time to go back to work and here is additional post for collection of blog posts how you could make provisioning of SPFx Web Parts to Classic SharePoint Sites inside of your WSP solution package:

1. Include SPFx Assets & Package inside of WSP
2. Deploy SPFx Web Part to SharePoint Server 2016 App Catalog with WSP
3. Install SPFx Web Part to SharePoint Site/Web
4. Include SPFx Web Part inside of Web Template
5. Run all SPFx Gulp tasks with one custom PowerShell function (this blog post) [additional]

The idea is to run all these gulp tasks for deploying and packaging your SPFx Web Parts to WSP solution with one command.

gulp bundle --ship --copytowsp --target-cdn http://sp2016/sites/appcatalog/SPFxAssets
gulp copyassetstowsp
gulp package-solution --ship
gulp copypackagetowsp

And if we have more than one SPFx Web Parts we have to repeat this tasks multiple times.

So, for that reason I wrote two PowerShell functions inside of ProvisionToWSP.ps1 file which is located at parent folder of all SPFx Web Parts which we want to deploy & package it to WSP solution.

These functions are:

• StartProvision for provision all SPFx Web Parts to WSP with specific target CDN URL
• StartProvisionExact for provision specific SPFx Web Part to WSP with specific target CDN URL

Here is code for both:

function StartProvision {
    param(
        [Parameter(Mandatory=$true)]
        [string]$targetCDN
    )

    Write-Host "TargetCDN '$targetCDN'"
  
    $SPFxRoot = Get-Location
    $webParts = Get-ChildItem -Directory
    foreach ($webPart in $webParts) {
        Set-Location -Path $SPFxRoot"/"$webPart
        Write-Host "SPFx Web Part '$SPFxRoot'"

        npm install
        gulp bundle --ship --copytowsp --target-cdn $targetCDN
        gulp copyassetstowsp
        gulp package-solution --ship
        gulp copypackagetowsp
    }
}

function StartProvisionExact {
    param(
        [Parameter(Mandatory=$true)]
        [string]$targetCDN,
        [Parameter(Mandatory=$true)]
        [string]$webpartName
    )

    Write-Host "TargetCDN '$targetCDN'"

    $SPFxRoot = Get-Location
    $webParts = Get-ChildItem -Directory
    $found = $false
    foreach ($webPart in $webParts) {
        if ($webPart.Name -eq $webpartName) {
            $found = $true

            Set-Location -Path $SPFxRoot"/"$webPart
            Write-Host "SPFx Web Part '$SPFxRoot'"

            npm install
            gulp bundle --ship --copytowsp --target-cdn $targetCDN
            gulp copyassetstowsp
            gulp package-solution --ship
            gulp copypackagetowsp
        }
    }

    if (!$found) {
        Write-Error "Web Part with name '$webpartName' not found"
    }
}

[ Complete code on GitHub ]

You can call these functions with one of next command depends on that if you want to install all or just one of SPFx Web Parts:

powershell.exe ". .\ProvisionToWSP.ps1; StartProvision -targetCDN 'http://sp2016/sites/appcatalog/SPFxAssets'"
powershell.exe ". .\ProvisionToWSP.ps1; StartProvisionExact -targetCDN 'http://sp2016/sites/appcatalog/SPFxAssets'" -webpartName "snack-webpart"

You can call this commands simply with TERMINAL inside of Visual Studio Code as you can see on picture below.

Previous step -> Include SPFx Web Part inside of Web Template

Cheers!
Gašper Rupnik

{End.}