SharePoint Modern Webpart

In the last blogs, we have seen: What is SharePoint modern framework? How to create a webpart & webpart folder structure? How to build a custom web part to the local server and SharePoint modern site?

In this blog, we will see: How to package solution? Deploy your client-side webpart to App Catalog. Install solution on SharePoint Modern site and add the web part to the page.

To use client-side webparts on modern SharePoint server-side pages, you need to deploy and register the webpart with SharePoint. First, you need to package the webpart and then deploy the webpart package to App Catalog in SharePoint site. Let’s go through below steps which are required to add webpart in modern pages.

Package the webpart

1. Open package-solution.json from the config folder.
2. The package-solution.jsonfile defines the package metadata as shown in the following code:

Name: <<your solution name>>

ID: Unique and Auto-generated according to the webpart.

Version: <<project version>>

IncludeClientSideAssets: Add true if you want to include all assets in package solution.

ZippedPackage: Location where you want your package solution.

3. In the console window, enter the following command to package your client-side solution that contains the webpart:

gulp package-solution

The command creates the package in the location mentioned in <<zippedPackage>>

Deploy the package to App Catalog

1. Go to <<your site’s>> App Catalog. Every O365 tenant has one App Catalog site collection.
2. Upload or drag and drop the <<.sppkg>> file generated during package solution, to the app catalog.

3. Above step deploys the client-side solution package. Because this is a full trust client-side solution, SharePoint displays a dialog and asks you to trust the client-side solution to deploy

Select Deploy

Install the client-side solution on your site

1. Go to your developer site collection or site collection which you want to use for testing.
2. Select the gears icon on the top nav bar on the right, and then select Add an app to go to your Apps page.
3. In the Search box, enter <<your solution name>>, and select Enter to filter your apps.

Select the <<your solution name>> to install the app on the site.

The client-side solution and the web part are installed on your developer site.

The Site Contents page shows you the installation status of your client-side solution. Make sure the installation is complete before going to the next step.

Add the webpart to modern page

1. In your browser, go to your site where the solution was just installed
2. Select the gears icon in the top nav bar on the right, and then select Add a page.
3. Edit the page.
4. Open the web part picker and select your webpart.

5. On the toolbar, select Save and close to save the page.

Congratulations! You have deployed a client-side webpart to a modern SharePoint page.