One new part of the build toolset for SharePoint Framework is called Workbench.
A Workbench is a tool where the developer can host and test their SharePoint Framework solution.
The Workbench is reactive and will automatically reload artifacts when the developer saves a file so that developers can see and test the solution quickly.
There are two versions of the Workbench. One is outside of SharePoint, hosted locally on the development machine that runs offline without SharePoint access and SharePoint data.
This allows the team and designers to build and design solutions with mock or fake data to focus on the user interface.
This enables us to quickly test the web part without deploying in SharePoint.
This includes the client-side page and the client-side canvas in which we can add, delete, and test our web part in the development phase.
When we execute the “gulp serve” command the local workbench starts. This command executes a series of gulp tasks to create a local, node-based HTTPS server on localhost:4321 and launches our default browser to test web parts from our local dev environment.
https://localhost:4321/temp/workbench.html -This HTML page is served from the local file system by Node.js and is loaded in the browser.
![]()
Figure 1: SPFX - Executing "gulp serve" command
![]()
Figure 2: SPFX - Workbench.html page
The second version is hosted inside SharePoint and is used when we need to test and verify the SharePoint Framework solution by using real SharePoint data and context.
URL - (Our site URL)/_layouts/15/workbench.aspx