Build And Deploy The Client Side Web Part (SPFx) In SharePoint Online

In the previous article, we saw how to create a new client Webpart (SPFx) for SharePoint Online with a React template.

What is SPFx?

• SPFx is introduced in SharePoint 2016. It is one of the new features in SharePoint.
• SharePoint app model development is used before SPFx. It was introduced in SP 2013.
• SharePoint apps client Web parts are loaded inside an IFrame, so it takes some time to load but SPFx is not like it and is fast.
• We can use SPFx in SharePoint pages and SharePoint modern site pages. in the previous article, we saw how to create a modern site page and how to add the Web part inside the modern site pages.
• Client-side Web parts are client-side components, which runs inside the context of a SharePoint page.
• Client-side Web parts can be deployed to SharePoint Online and you can also use modern JavaScript tools and libraries to build them.

Client-side Web parts support the features, which are given below.

1. Building with HTML and JavaScript.
2. Both SharePoint Online and on-premises environments.

Steps

Follow the steps given below to build and deploy SPFx,

Step 1. Open the cmd prompt, once your development is done.

Step 2. Run the command given below to clean the project and subsequently press enter.

gulp clean

Step 3. Before you run the Gulp bundle, make the change of CDN path (folder from a document library or original CDN path), go to config/write-manifests.json file.

Step 4. Now, run Gulp bundle --ship, and SharePoint Framework will generate debug bundles in the dist folder.

gulp bundle --ship

SharePoint Framework supports two types of builds, which are a debug build and a release build. Both are triggered, using the Gulp bundle task.

If you request a release build, use the gulp bundle --production or gulp bundle --ship command (the production and ship arguments are interchangeable, and using either of them gives exactly the same result). SharePoint Framework will generate optimized bundles and copy them to the temp/deploy folder.

Step 4. Finally, run the gulp package-solution --ship. To create a .sppkg file, it must deployed in the SharePoint app catalog.

This .sppkg file is located in the SharePoint folder inside the project folder.

The package process is done.

Once we run the commands given above, then get the bundle file from your project folder.

Open your project folder - Temp - deploy.

In the deploy folder, copy all the files and add in the SharePoint library path or CDN, which you mentioned in the write-manifests.json file.

Upload the files to the SharePoint document library.

Once you completed the steps given above, upload the app in an app catalog and install it on your SharePoint site.

Get .sppkg file from <project folder> - Sharepoint - solution - <helloworldsample-webpart.sppkg>.

SharePoint folder

Inside the SharePoint folder, click the solution folder to get the .sppkg file.

Inside the solution folder, copy the .sppkg file and upload it to an app catalog.

Upload the app file in app catalog

After you upload the app file, you will get the pop-up, as shown below, and click Deploy to trust the client-side Webpart.

Now, install the app and add the client app part to your pages or modern site pages.

Refer to the URL given below.

Install your SharePoint client-side web part (SPFx)

The Web part will be available, which is based on the group name, you provided in the HelloWorldSampleWebPart.manifest.json file.

Finally, client-side Webpart (SPFx) has been deployed successfully.

Summary

In this article, we have explored how to take the build for the client-side Web part and deploy the Web part in SharePoint Online.