SharePoint Framework (SPFx) Released

Hopefully by now you heard that the new SharePoint Framework (SPFx) has been released in preview. The original blog post from Microsoft can be found here.

This is a milestone for the SharePoint Development Team, as it now begins the transition to what they demonstrated back on May 4th for SharePoint. The new framework is comprised of a few components, if you are using Windows like me then you will need the following:

If you are using Visual Studio:

Once you have all of these installed, you can then follow the core instruction provided by Microsoft over at the GitHub Wiki.

As a note for me running Windows 10, I ended up having a missing package that manifested itself at runtime. Top resolve this I ran: npm install es6-promise

This might not make any sense if you have never run NodeJS on your machine before. NodeJS is a great platform for development using JavaScript code and can be used for more than just the SharePoint Framework, however in order to be able to develop completely offline an engine was needed that would allow an empty SharePoint type interface to be launched.

Under the covers of the SharePoint Framework, core Web Development components are used which makes a change from the standard SharePoint Development approaches we have been used to. To get started you still need to download a few things and that is done from within the NodeJS command line interface. This launched from your start menu easily.

Once the command line loads it should look like this or similar.

The location really means nothing as you will be moving around anyway. The core command you will use here is “npm” which is the package manager for getting the modules that you need. The documentation runs through the following commands to get what you need:

npm i -g yo gulp

npm i -g @microsoft/generator-sharepoint

These commands will setup the scaffolding you need, using Yeoman Generator and then Gulp for Build and Task Management. Then the Generator project itself provided by Microsoft. Once you have everything setup, you can follow the next document that is provided and bring down the sample web part using the following command:

yo @microsoft/sharepoint

​

It will ask you a few more questions and then you are ready to complete the wizard, choosing what JavaScript Framework to use etc.

Once you have complete the core questions it will then go ahead and create what is needed, within the directory you specified.

It will take some time to complete as it downloads any dependencies and creates the core project. As you run this you may see some error, which you can just ignore at this point as they are mostly warnings about versions.

Once it is all completed it should display a nice little message allowing you to either load what it has created using “gulp serve” command to simply load it within Visual Studio or Visual Studio Code.

“Gulp Serve”

Visual Studio Code

You can follow the rest of the example instructions and code changes that Microsoft have provided to see how it works in more detail. Right now you are simply using the core scaffolding and NodeJS to see what it would function and work like and not actually loading it within SharePoint.

To get it working within SharePoint Online, you need to follow the steps to setup your Office 365 tenant, a Developer Site Collection and a few other things.

Once you have this all configured you are then able to not only test locally but then test and deploy also to the Office 365 tenant.

This is just the start of being able to use the SharePoint Framework, so stay tuned for some further content on how this will change what we develop and build within SharePoint.