Deploy SPFx client side web part to a SharePoint library

Total visits : 3229

In this article, you will deploy the client side webpart to a SharePoint Library. SharePoint Framework build tools provide out-of-the-box support for deploying to an Azure Storage account, but this involved extra cost. Azure Storage account is the best practice to maintain our webpart.

Prerequisites

  1. Setup SharePoint Tenant
  2. Setup your machine
  3. First Webpart

In this article I am showing how to deploy a client side web part in SharePoint Library.

Step 1: Create Webpart

  • Create a new Webpart, I named here “spfx-firstwebpart”
  • md spfx-firstwebpart
  • cd spfx-firstwebpart
  • Create new Webpart yo @microsoft/sharepoint

It will create a new Webpart refer below screenshot

deploysp1deploysp2

Build the Webpart gulp serve

Step 2: Create SharePoint Library

  • Create a SharePoint Library “Myspfxwebparts” and give read permission to all users.

Step 3: Open code Visual Studio Code

  • Open the code in Visual code tool.
  • Type in cmd : code .

Step 4: Update the CDN Path

  • We need to configure the CDN path, i.e SharePoint Library what we created. https://jenkinsblogs.sharepoint.com/sites/dev/Myspfxwebparts
  • we have to configure our CDN path in write-manifests.json file. This file can be found in the config folder.
  • i.e

{
  “cdnBasePath”: “https://jenkinsblogs.sharepoint.com/sites/dev/Myspfxwebparts”
}

  • Save the file.
  • Switch to cmd prompt

Step 5: Package and Deploy the webpart

  • Generate the files to deploy in the SharePoint Library
    • gulp bundle –ship
    • Generated files can be found in spfx-firstwebpart\temp\deploy folder
    • upload the files in the SharePoint Library
      • https://jenkinsblogs.sharepoint.com/sites/dev/Myspfxwebparts
  • Create a .spapp file for this webpart to upload in App Catalog
    • gulp package-solution –ship
    • Generated spapp file can be found in spfx-firstwebpart\sharepoint folder
    • upload the spapp file in App catalog
    • SharePoint will show you a popup and ask you to trust the client-side solution to deploy.
    • Click Deploy

Step 6: Install the App

  • Open your SharePoint Site
  • Go to “Add an App”
  • Click “From Your Organization”
  • Select and Click you app to install it.

Syep 7: Add the Webpart in your Page

  • After App installation
  • Go to your Page
  • Edit the Page
  • Click Insert tab and click Webpart
  • Select Custom folder –> you can see your webpart, refer below screenshot

deploysp3

  • Now you can add your webpart
    • Select the your webpart and Click Add
    • It will add your webpart

deploysp4

Any queries contact me…

  • veera

    Excellent !! Keep going

    Which one do you prefer/recommend to use React?

    • Thank you Veera,

      we can use React.js or Angularjs
      Microsoft recommend React.js, Lot of people like to use Angularjs,
      I am going to write a next article “how to include angularjs and use it”

  • Chris Renaud

    Great article, thanks for sharing!
    Did you have to make any changes to your serve.json file as well? it keep telling me that it needs to have the gulp serve running. It seems that its referring to my localhost still.

    • you need to update the only file write-manifests.json i.e step 4, Once again verify the steps and let me know if you face the same issue.

      • Chris Renaud

        Thanks for the reply, I’m good now I had an issue with the versioning on the app. Appreciate you posting the article.

  • Vinod R

    Nice article, thanks for sharing!!!