How to Deploy PnP Modern Search Web Parts

If you use Microsoft 365 (Office 365), you probably have been using Microsoft Search, too. But there might be use cases, when it’s not enough – for example, when you need a customized Search Application. If this is the case, your number one option might be to deploy PnP Modern Search Web Parts. This is an open source solution that helps you to build customized search applications in SharePoint Online modern experience.

However, this solution has to be deployed manually to your tenant. Let’s see how.

1 – Download the PnP package

You can download the latest release HERE. Scroll down to Assets, and then click on the .sppkg file:

2 – Deploy the PnP Modern Search package to your tenant’s App Catalog

App Catalog is a special site collection in SharePoint, that stores the apps for your organization’ use. If you have an existing App Catalog, you can deploy the PnP Modern Search package there. Otherwise, you have to create a new App Catalog.

2.1 – Create a new App Catalog

You have to be a tenant administrator to create a new App Catalog.

Go to Microsoft 365 Admin / SharePoint Admin Center. On the left menu, click on “More features”, and the select “Apps”:

Once here, click on New App Catalog, then fill in the form, so that the new site collection will be created:

2.2 – Deploy the PnP Modern Search Package

Once your App Catalog is done, or you have one that has been created earlier, open its URL and then click on “Apps for SharePoint”:

On this screen, click on Upload, then choose the PnP Modern Search package file which you downloaded in Step 1.

When you’re asked if you trust PnP Modern Search Web Parts, click the checkbox if you want to deploy it to all site collections, otherwise leave it unchecked if you need it on a few selected sites only. Then click Deploy:

Once done, you should see the PnP Modern Search Web Parts in the App Catalog:

3 – Enjoy!

Now, go to any (modern) site on your tenant (in a site collection where you’ve deployed PnP Modern Search above), and edit the page. In the web parts list, search for “search”, and you’ll see the PnP Modern Search Web Parts there:

What’s Next?

In the next part in this series, I’ll demonstrate how to use the PnP Modern Search Web Parts in SharePoint Online, and also when and why you might need them.

Meanwhile, if you don’t mind, please share in the comments what you miss from out-of-the-box Microsoft Search.