Deploy a SPFx web part

Introduction

In this fifth sequel of the SPFx blog series, let’s discuss how we can deploy a web part to the SharePoint App catalog site. In case you have not followed our previous blogs, you can access the links below!

  1. SharePoint Framework Development (SPFx)
  2. Build your first SPFx client-side web part
  3. Set up SharePoint Framework (SPFx) Development Environment
  4. Setting up an App Catalog site

Please note that an App Catalog site is a pre-requisite to the deployment! Hence, you need to ensure that an App Catalog set up is ready to deploy!

Maximize your SharePoint Potential with AlphaBOLD

Connect with AlphaBOLD's SharePoint experts for tailored solutions that enhance your business productivity.

Request a Consultation

Let’s Deploy!

The first thing that we need to do to deploy our web part is to create a deployable package that can be uploaded to the App Catalog:

How To Create A Package?

  • Launch the Node.JS or console window and set path to our SPFx web part directory.
  • On the Node.JS command prompt or console window type the following command: “gulp clean”
  • The gulp clean command cleans the deployment file “.sppkg” in the project directory SharePoint folder
this image shows the The gulp clean command cleans the deployment file “.sppkg” in the project directory SharePoint folder -Deploy a SPFx web part
  • On Node.JS command prompt or console window type the following command: “gulp bundle -ship”
this image shows the “gulp bundle -ship”

Note: “gulp bundle -ship” is a mandatory command in the deployment process because if we do not use this command and directly run “gulp package-solution -ship,” it will connect to localhost rather than the desired environment.

  • After successful execution of the above command, type the following command into Node.JS command prompt or on the console window: “gulp package-solution –ship” 
this image shows the gulp package-solution –Deploy a SPFx web part

Deploy Your Package:

  • After you have performed the steps mentioned above, you will see a created package with the following extension “.sppkg” in the project directory: “myprojectsharepointsolutionmypackage.sppkg”.
  • Simply open the project directory in the windows explorer and then drag and drop the “.sppkg” file into the App Catalog.
this image shows the .sppkg” file into the App Catalog.

After the package has finished uploading, a dialog box will be prompted. Click on the “Deploy” button.

this image shows the Deploy” button-Deploy a SPFx web part

That’s it, your SPFx web part is deployed to the App Catalog site.

this image shows the SPFx web part is deployed to the App Catalog site. Deploy a SPFx web part

Elevate your Business with AlphaBOLD’s SharePoint Expertise

AlphaBOLD’s team of SharePoint professionals is here to assist. From deployment to customization, we ensure your SharePoint platform aligns perfectly with your business objectives.

Request a Consultation

Conclusion

We can deploy the SPFx web part by running few commands onto the Node.JS command prompt and drag and drop the package to App Catalog. After deploying the web part, it will be available for addition as an app in site contents, and later we can add this app on the page as a web part. In the next blog post, we will learn how you can add deployed web parts on the SharePoint modern page.

If you have any question or queries, do not hesitate to reach out to us

Explore Recent Blog Posts