SharePoint Framework Context Explorer web part


The new SharePoint Framework developer preview is available now and you can check out how to get started over in the Microsoft GitHub repo here:

Follow through the setup and tutorials if you’re new to the SPFx and how it all hangs together.

With the new SPFx we get given a context object as part of the core which provides properties we can leverage inside our web part. This example is super simple and is aimed just to provide an easy to consume view of the context.

The full technical document is found  here

We can run the web part in the WorkBench hosted on localhost to see something like this



When we run the same web part within a SharePoint online hosted WorkBench it updates to show something like this


Extend the render

We inject some additional code into the render method to display the various properties.

Helper functions

There are a couple of additional functions to help deal with the objects and enums.

Clone and extend

Hopefully this will help you get familiar with some of the properties you have access to. Feel free to clone the code from my repo SPFx Context Explorer Repo.


The Future of SharePoint paradigm series – Using Visual Studio 2015 to build a SharePoint Framework client web part


Microsoft announced the new SharePoint Framework at the Future of SharePoint event on May 4th 2016. You can read about the full announcement here:

Dan Kogan, principal group program manager, covers the SPFx in his video from the event. Watch this if you haven’t already as it details all the cool new things that the SPFx will bring.

Most of the demo’s and blogs have focused on using Visual Studio Code. You can still develop using Visual Studio 2015 if you choose. This article will explain how to hook up the SPFx solution and use Visual Studio 2015.

This article is based on the SharePoint Framework preview and is subject o change for the GA. Any information is correct at the time of publication, but you should check with the latest Microsoft information.

Getting Visual Studio 2015 ready

The SPFx experience is normally used from VS Code so we have to add a few things to Visual Studio 2015 to enable it to use the node and npm tech.

First step is to install the Visual Studio 2015 update 3 (, this takes about 20 minutes and requires a restart.

Once the update is installed the Node.js tools for Visual Studio ( need to be installed.

Creating your solution

Create a new folder which will contain the generator output. I’ll call mine WebPartExample1



Run the SPFx Yeoman Generator


For the preview I need to add the next step of an alias


This will then pull in the node modules and begin running the generator


For this example we’ll choose the client side webpart



Give the web part a name


Add the description


Choose your Framework of choice. I personally prefer other frameworks than React so i’ll choose Vanilla.


And the generator is done.


If we check our file system we can see the new files



Importing this Yeoman output into Visual Studio

From Visual Studio 2015 create a new project.

From the TypeScript list choose Node.js and then select ‘From Existing Node.js code’.

It is important to select the folder your Yeoman output was in.


Then you need to name the project the same as your SPFx client side project.

If you need to find it check the package.json

“name”: “web-part-example-1”,
“version”: “0.0.2”,
“private”: true,

“engines”: {
“node”: “>=0.10.0”

“dependencies”: {
“@ms/sp-client-platform”: “0.0.20”,
“load-styles”: “^2.0.0”

“devDependencies”: {
“@ms/ms-core-build”: “0.3.23”,
“gulp”: “^3.9.0”


It will be listed in there.

Now click OK to run the wizard.


Again select the right folder and click next.


If you have the right folder you should see the gulpfile.js.


Click finish to complete the project import.

The project

Let’s take a look through the new project and solution.


We can see that there is an npm node which allows us to explore the node modules. There are also plenty of regular files like tsd.json, tslint.json, package.json etc. These should be fairly recognisable from common web dev projects. Remember that SPFx is expecting you to have working knowledge of modern web dev like TypeScript and gulp.

Fixing gulpfile.js for Visual Studio 2015

We need to just change the gulpfile.js to use var instead of let.


Setting up for F5 running

We need to modify the project settings to include the node module gulp and argument serve.


Once you make those changes F5 will build and run the server files and open the SharePoint Workbench


As I stated earlier these are steps based on the DevKitchen pre-release SPFx bits and will almost certainly change for GA. It hopefully shows how you can still make use of Visual Studio 2015 and don’t have to move to using VSCode if you’d prefer VS2015.

I hope you found this info useful and onwards to the Future of SharePoint