SharePoint Framework - Test SPFx WebParts on Modern Pages

In this article, we will explore how we can test the SharePoint framework web parts on a modern page instead of testing them on the workbench. SharePoint Framework client web parts work well on both, classic and modern SharePoint. SharePoint provides workbench to test the web parts individually.

Overview

SharePoint Framework client web parts work well on both classic and modern SharePoint. SharePoint provides workbench to test the web parts individually. However, the web part needs to be added to the actual SharePoint page to see how it looks and fits the design. Adding SPFx web part on an actual page helps us better judge the entire look and feel of the page by taking the decision on its position, layout, and overall composition of the page.
 
In this article, we will explore how we can test the SharePoint framework web parts on a modern page instead of testing them on the workbench.
 
Workbench
 
SharePoint workbench is a development and design surface which helps the developers to preview and test the web part in isolation without deploying it to actual SharePoint site. SharePoint offers two types of workbenches.
 
Local Workbench
 
Local workbench is an HTML based page which mimics SharePoint UI. It starts after running the “gulp serve” command and usually opens at the URL https://localhost:4321/temp/workbench.html
 
 SharePoint Framework - Test SPFx WebParts on Modern Pages
SharePoint workbench
 
SharePoint workbench can be accessed from SharePoint site by navigating to “/_layouts/15/workbench.aspx”. The gulp can be run with the command “gulp serve --nobrowser”. On SharePoint workbench, our web part can be seen along with other available web parts in SharePoint.
 
SharePoint Framework - Test SPFx WebParts on Modern Pages
Develop SharePoint Framework Web Part
 
Open the command prompt. Create a directory for SPFx solution.
  1. md spfx-hello-world  
Navigate to above-created directory.
  1. cd spfx-hello-world  
Run Yeoman SharePoint Generator to create the solution.
  1. yo @microsoft/sharepoint  
Yeoman generator will present you with the wizard by asking questions about the solution to be created.
 
SharePoint Framework - Test SPFx WebParts on Modern Pages
 
Solution Name: Hit Enter to have a default name (spfx-hello-world in this case) or type in any other name for your solution.
Selected choice: Hit Enter.
 
Target for component: Here, we can select the target environment where we are planning to deploy the client web part, i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).
Selected choice: SharePoint Online only (latest)
 
Place of files: We may choose to use the same folder or create a subfolder for our solution.
Selected choice: Same folder
 
Deployment option: Selecting Y will allow the app to deployed instantly to all sites and will be accessible everywhere.
Selected choice: N (install on each site explicitly)
 
Type of client-side component to create: We can choose to create a client-side web part or an extension. Choose the web part option.
Selected choice: WebPart
 
Web part name: Hit Enter to select the default name or type in any other name.
Selected choice: HelloWorld
 
Web part description: Hit Enter to select the default description or type in any other value.
Selected choice: Test SPFx on Modern Pages
 
Framework to use: Select any JavaScript framework to develop the component. Available choices are  - No JavaScript Framework, React, and Knockout.
 
Selected choice: No JavaScript
 
Yeoman generator will perform scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.
 
Once the scaffolding process is completed, lock down the version of project dependencies by running the below command.
  1. npm shrinkwrap  
In the command prompt, type the below command to open the solution in a code editor of your choice.
  1. code .  
Test SPFx web part on Modern Pages
 
On the command prompt, run the below command.
  1. gulp serve  
Or run the below command, without opening browser instance.
  1. gulp serve --nobrowser  
In the browser, navigate to your SharePoint page. Append the below text to URL in the browser.
  1. ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js  
Click “Load debug scripts” when prompted.
SharePoint Framework - Test SPFx WebParts on Modern Pages
 
Edit the page, click Add icon to add the web part.
 
SharePoint Framework - Test SPFx WebParts on Modern Pages 
 
Our SPFx web part is available in the list of web parts to add.
 
The web part can be added to the page and can be tested along with other content on the page.
 
Summary
 
SharePoint workbench helps to preview and test the web parts in isolation. However, using the above-mentioned trick, the web part can be tested on the page itself along with the other content. This will help to visualize the final content with SPFx web part on the page.