How does Workbench.aspx in Office365 get local files?

Question

I'm sure this is a really simple answer but I can't see the connection.

Essentially I'm playing with the SPFx tutorials and I just uploaded the workbench.aspx to my shared documents and the hello world webpart is reflecting the changes I make locally. But in the aspx file I don't see a reference to anything external so I'm a little confused as to how it's getting those local files. I assume it has something with gulp serve but yea I'm not seeing the connection.

Answer 1

The workbench.aspx inherits from Microsoft.SharePoint.WebControls.ClientSidePage which I assume uses the specified ClientSideApplicationId to load a specific Client Side Application.

The id 8be81a5c-af38-4bb2-af97-afa3b64dfbed is the Workbench app which as part of the html includes:

<script type="text/javascript" src="https://spoprod-a.akamaihd.net/files/sp-client-prod_20160907.004/sp-module-loader_dd0eb85580e3cfe29779ada495761ff5.js">
</script>

This loader has the following starting points hardcoded:

• https://localhost:4321/temp/manifests.js
• http://localhost:4321/temp/manifests.js

These files and the rest of your application is served by gulp-connect which you start with the command gulp serve (--nobrowser)

Answer 2

Since you are running Gulp on Node and have to load "unsafe script" in your browser you are accepting the script source as your local machine. The workbench in the dev tenant is unaware of the script source which is why you get a warning. The workbench doesn't access your local machine, it's Gulp that serves the workbench both locally and in Office 365.

And that's pretty amazing, making our programming life much easier...