Microsoft 365: Deploy The Client Side Web Part (SPFx) to a SharePoint Online – Part 2

Hello Everyone,  

Hope you all are doing well.  

Today I am going to discuss about how to deploy SPFx component.

What is Gulp :

Gulp is a popular JavaScript task runner that simplifies web development by automating tasks, making it easier to manage and optimize projects. With Gulp, developers define and execute tasks using a Gulpfile, saving time and effort in the development process.

Step 1 : Run the command given below to clean the project and subsequently press enter

gulp clean is a command used to delete files and directories within a web development project, helping developers maintain a clean and organized project workspace by removing unwanted or temporary files.

gulp clean

Step 2 : Run the command gulp build for project compilation

The gulp build command is a Gulp task used to prepare a web project for production.

This command will bundle and minify all of your JavaScript files into a single file in the build directory.

gulp build

Step 3 : Now, enter the following command to bundle your client-side solution

gulp bundle –ship is a command used to create optimized and minified bundles of client-side assets for production deployment.

gulp bundle --ship

Step 4 : Finally, run the gulp package-solution –ship To create .sppkg file

gulp package-solution –ship is a command that packages and optimizes a solution for production deployment, ensuring efficiency and performance in a smaller deployment package.

gulp package-solution --ship

Once you completed the steps given above, upload the app in an app catalog

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

Get .sppkg file from Sharepoint solution spfxsitecollections.sppkg

SharePoint folder :

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

Extract cab file data :

• rename .sppkg file as .cab file.
• extract .cab file using any archive application.

Upload To App Catalog :

This 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 Enable app.

Go to API Access page.

Select Approve.

Install the client-side solution on your site :

1. Go to your developer site collection or site collection that 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. Select the spfxsitecollections-client-side-solution app to install the app on the site.

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

Add the HelloWorld web part to modern page

1. In your browser, go to your site where the solution was installed.
2. Select the gears icon in the top nav bar on the right, and then select Add a page.

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

I hope this article will help you learn about the Microsoft Graph API, SharePoint Framework (SPFx) components, and how to deploy the client-side web part (SPFx) to SharePoint Online.

LinkedIn – https://www.linkedin.com/in/ganesh-barde-860302218/

Twitter –  https://twitter.com/GaneshB64176973?t=6N6FyRy-YOKAF5ujrI5QHQ&s=09

Thanks for reading. 

Have a wonderful day.