Script to add SPFx webpart to a classic page using PnP Powershell

Question

I have to run a Powershell script that creates a Site Collection App catalog , then add an SPFx webpart to it and publish it. Also it has to install it in the site. I have done upto this part.

Last piece missing is to add it to a classic page. I can see adding to modern pages. but i need to add it to a classic page. I have seen this post - https://techcommunity.microsoft.com/t5/SharePoint-Developer/PnP-PowerShell-Adding-SPFx-web-part-to-a...

But it has a step to manually add SPFx app to a classic page and to get the XML. This is not possible in my case as I have to automate everything. Is there way to achieve my need or to tweak the method provided in the post.

As far my code is:

Add-PnPSiteCollectionAppCatalog -Site $url

Add-PnPApp -Path D:/custom.sppkg -Scope Site -Publish

Install-PnPApp -Identity "custom-webpart" -Scope Site

Answer 1

You can follow the below mentioned steps and after that you will be able to add your webpart to a classic page.

1) Go to your SharePoint workbench page (i.e https://tenant.sharepoint.com/sites/test/_layouts/15/workbench.aspx)

2) Add your SPFx webpart on the page and configure it as per your requirements.

3) Once done, you can export your webpart data by clicking on Webpart Data tab as below:

4) In the dialog, you will find the classic pages tab. Click on it, which will open the webpart's xml as below:

5) Copy the entire data, i.e whole section including the <webParts>...</webparts> tag.

6) In your local file system, create a yourWebpart.dwp or yourWebpart.xml file and paste that data inside this file and save your file.

7) After that, you can run the below PS commands:

$webpartXML = [IO.File]::ReadAllText("C:\Users\Admin\Desktop\yourWebpart.dwp")

Add-PnPWebPartToWebPartPage -ServerRelativePageUrl "/sites/test/Pages/classicPage.aspx" -Xml $webpartXML -ZoneId "Custom Zone" -ZoneIndex 0  

Result would be something like: