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 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 its 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 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 take 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 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, using 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 .sppkg file, it must deployed in SharePoint app catalog.

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

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 deploy folder, copy all the files and add in SharePoint library path or CDN, which you mentioned in write-manifests.json file.


Upload the files to SharePoint document library.

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

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

SharePoint folder


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

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

• Upload the app file in app catalog

After you uploaded 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 in 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, which you provided in 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 client side Web part and deploy the Web part in SharePoint Online.