Monday, April 10, 2017

SharePoint Framework (SPFx) App Development

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 install -g npm

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


1 comment:

  1. Thanks for the post. You have explained the topic in very simple and step by step.
    node js developer london

    ReplyDelete