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!

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

gulp clean

  • On Node.JS command prompt or console window type the following command:

“gulp bundle –ship”

 gulp bundle

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” 

gulp package solution 

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: “myproject\sharepoint\solution\mypackage.sppkg”.
  • Simply open the project directory in the windows explorer and then drag and drop the “.sppkg” file into the App Catalog.

App-Catalog

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

spfx-deploy-button

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

SPFx-web-part-deployed

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.

Leave a Reply

Your email address will not be published. Required fields are marked *