Add SPFx WebPart to modern page using PnP PowerShell Cmdlets

Add Client Side WebPart using PnP PoSh
[Photo by Cathryn Lavery on Unsplash]

You have created a modern team site, and now you are thinking about adding a custom or default webpart then this post should be helpful. Think about something like adding a site contact while provisioning the modern site. Thanks to PnP PowerShell Cmdlets again, for making our life easy. I'll be using Add-PnPClientSideWebPart command.

I'm updating the home page by adding default people webpart, and configuring it to show in the section 1 and in column 2.

This is how it looks, after you run the below script.

Added a people webpart, set the title as "Site Contact", and set Alex as a default user.

Two things to consider, one finding the properties of the WebPart and second converting it into hash table. Finding properties for your own custom webpart should be easy but I found it difficult for the default webparts. There is one nice trick, posted by Chris O'Brien using CSOM object in debugger mode. For me it has been while since I used Visual Studio and I use MacBook as my primary work horse. So I used site workbench and then some digging using the React developer tools chrome extension. I have one more trick in my sleeve, but it deserves a separate post.

find webpart properties