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.
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
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.
- 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
- 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
- Now you can add your webpart
- Select the your webpart and Click Add
- It will add your webpart
Any queries contact me…