Skip to main content

How to test SPFx web parts and extension on the modern pages in SharePoint online

In this article, we are going to see the ways in which we can test, and debug SPFx solutions on Modern Pages on SharePoint Sites. There are several ways to debug the SPFx client-side solutions with SharePoint Modern Pages.

Why it's beneficial to test web parts on modern pages?

It's easy to test web parts on the local workbench and it's a very time-saving approach. But in some cases, when you are developing web parts that interact with the content of the SharePoint site or you are using the SharePoint APIs local workbench will not work, because we need access to get data using SharePoint APIs that we will not get on local workbench. 

Test SharePoint Framework web parts on Modern Pages in SharePoint sites without deploying to your app catalog site.

Test your SPFx client-side solution (web part or extension) on the SharePoint Modern pages by loading the debug scripts. 

Follow the steps:

1. Run the command (gulp serve –nobrowser )
2. Go to the SharePoint site and navigate to the page where you will test the web part.
3. In the browser append the following to the URL in the browser and reload:
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
A popup appears, click the “Allow debug scripts”:
Test SPFx web parts
4. Click on the "Load debug scripts". Now edit the page and add the web part you want to test.

Test SharePoint Framework web parts on Modern Pages in SharePoint sites by deploying them to your app catalog site.

This method is very helpful to test the web part in the actual environment. also the changes you do to the solution will also reflect at the same time. 
To test the SharePoint Framework web parts on the production environment by deploying them to the SharePoint app catalog site, follow the steps mentioned below:
1. Build the .sppkg package of the SharePoint Framework solution. To build the .sppkg package of the solution, use the commands mentioned below( not the production version)
gulp bundle 
gulp package-solution 
2.  Now deploy the package on the app catalog site and install it.
3. Now run your solution using gulp serve --nobrowser
4. Now go to the site where you installed the solution and add the web part on the page and test it.

Conclusion:
In this article, we discussed methods to test the web parts on the modern pages in SharePoint Sites with deployment on the app catalog site and without deployment also.
It will help in debugging and testing the SPFx web parts in the production environment.

Comments

  1. Content is very useful... Thanks for using easy way to express. Your written language is very easy to understand...

    ReplyDelete

Post a Comment

Popular posts from this blog

SPFx Interview Questions With Answers

In this article, we are going to discuss interview questions related to the SPFx (SharePoint Framework Development ). It will help you to prepare for the interview and in getting clarity on the core concepts of SPFx development. What is SPFx? SPFx, short for SharePoint Framework,  SPFx  allows us for client-side SharePoint development, we can easily connect with SharePoint data and it also supports for open source tools. What is the major difference between SPFx web part and the SharePoint app? Both the development model supports client-side development but the major difference between these two is that the SharePoint app(add-in) runs on the iframe. What you can build with SPFx? Using SPFx framework we can customize the SharePoint pages. We can build things mentioned below using the SharePoint Framework(SPFx). Web parts, Extensions, Adaptive Card, Library Component How many types of extensions we can create using SPFx? SPFx has three extension types: Application Customizers: Using the

How to register an app in SharePoint

In this article, we are going to learn how to register an app/add-in in SharePoint online. If you have created a Sharepoint provider-hosted add-in or other SharePoint solution and to access the SharePoint site or list using the app/add-in you need to register the add-in on SharePoint and to grant permission. Register app in SharePoint 1. Login into SharePoint and Navigate to register an app page. Use the URL mentioned below:          [Sitecollection URL]/_layouts/15/appregnew.aspx 2.  Once you navigate to the Register app page, a form will open. You need to fill all the fields on the form. Client Id and Client Secret  generated when we click on the generate button available next to the fields.  Title : Name of the add-in which you want to give. App Domain : Where your domain is hosted, for the local environment you can place             "www.localhost.com". Do not include HTTP or HTTPS in App Domain. Redirect URL :  Insert the redirect URL, for t

Permission XML for SharePoint Add-in

In this article, we will be discussing the permission XMLs, which are used to provide permission to SharePoint add-in. Permission XML for the SharePoint app. You can set the App only permission, by setting "true" or "false" in  AllowAppOnlyPolicy=“true” in these permission XMLs.   If add-in granted permission to tenant scope, It includes all children in scope. Before granting access to the app, need to register an app. Follow this link for step by step guide to  How to register an app/add-in in SharePoint   Providing access to add-in at tenant level: To provide access at tenant level user must have the tenant admin level permission. To grant this permission tenant admin can use this URL   https://tenantName-admin.sharepoint.com/_layouts/appinv.aspx Search the App Id (Client ID) and it will fetch all the information which you provide at time of registration of app.   Assign full control at tenant level : <AppPermissionRequests AllowAppOnlyPolicy="true&quo