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

image_thumb.png

Microsoft announced the new SharePoint Framework at the Future of SharePoint event on May 4th 2016. You can read about the full announcement here: https://blogs.office.com/2016/05/04/the-sharepoint-framework-an-open-and-connected-platform/

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 (https://www.visualstudio.com/news/releasenotes/vs2015-update3-vs), this takes about 20 minutes and requires a restart.

Once the update is installed the Node.js tools for Visual Studio (https://www.visualstudio.com/en-us/features/node-js-vs.aspx) need to be installed.

Creating your solution

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

image

image

Run the SPFx Yeoman Generator

image

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

image

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

image

For this example we’ll choose the client side webpart

 

image

Give the web part a name

image

Add the description

image

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

image

And the generator is done.

image

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

image

 

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.

image

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.

image

Again select the right folder and click next.

image

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

image

Click finish to complete the project import.

The project

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

image

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.

image

Setting up for F5 running

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

image

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

image

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

Leave a Reply

Your email address will not be published. Required fields are marked *