The Wizardry behind the Sharepoint Workbench.aspx

A couple of centuries ago, we did have neither Sharepoint nor the fantastic Workbench.aspx

As a representant of the old school of “server side webparts”, I have decided to give a look at the new SPFx framework (SPFx sounds like an advanced secret project, which gives finally a touch of coolness to Sharepoint).

Automatic rebuilds and deployments on the local developer machine are very cool features, but I must admit I was a little disturbed when I saw my demo webpart available on my sharepoint online account, without any further actions by myself.

How does this wizardry works ? 

The quick answer is obvious :

The Workbench.aspx communicates with gulp serve to request your local webpart.

If you go to Workbench.aspx without gulp serve running, you will get the following warning :

warning no gulp serve spfx framework workbench.aspx

For an in-depth look, start your browser and the developer toolbar and activate network tracing. Navigate to your Workbench.aspx which is located under {your site}_layouts/15/workbench.aspx and search for your webpart title, in my case the HelloWorld webpart (please note that gulp serve must be running for this step).

The webpart metadata are contained in the manifest.js which is read by our Workbench.aspx

developer toolbar network tracing manifest.js spfx framework workbench.aspx

The webpart itself is loaded as a separate javascript file, the whole code is bundled in the file hello-world.bundle.js. Add your webpart to your page and hit F5 to reload the page. You can now see that your webpart was sent as a javascript file as shown below.

developer toolbar network tracing bundle.js spfx framework workbench.aspx

The new Sharepoint programming paradigm improves various important aspects in the development pipeline.

We can deploy and test our webparts to any environment we need to without any delays and server impacts (because the changes are only temporary, within our workbench.aspx), which is a huge advantage, for the developer and for our customers.

Let’s use your wand !

P.S. : You will find the perfect introduction just here

Setup your development environment

Build your first client-side webpart

Connect to your sharepoint