Published: 6 June 2017
This is the first post of the SharePoint Framework Development series, we will be setting up the environment and the tool chains required to start the development using SharePoint Framework(SPFx)
SharePoint Framework is the new development model where lot of works had been going over the past year. It reached General Availability on Feb 23rd 2017. SPFx is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data and support for open source tooling.
In the older SharePoint Days, we were mostly using Server Side Object Model to customize SharePoint. Since the code ran within the main W3WP thread, deployments resulted in brief downtime and increased the risk that came along with untested code. Moreover, Server Side code was not feasible with Office 365 based SharePoint Online implementations. To overcome the sharing of the SharePoint thread by the code, Sand boxed solutions were introduced that executed in its own SPUCWorkerProcess. However, they had their own limitations and are in a deprecated stage now.
Later, SharePoint Add-ins were introduced which leveraged the client side development approach and helped developers deploy solutions to Office 365 SharePoint Online as well as On Premise. In addition to it, the Add-ins were installed in the app web which was separate from the main SharePoint Host web creating the required isolation. However, the add-ins had the IFrame and App web dependency which forced developers to use workarounds for the limitations that came along with it (Cross Domain Library for instance). To overcome some of the down sides of Add-ins, developers embraced a mix of Add-in + Client Side Content Editor web part development which exposed the page code and any one with 'Add and Customize Pages' permission could break the existing code from the browser.
This is the first article of the SharePoint Framework series aimed to give the users a jumpstart in the SharePoint Framework Development. In this article, we will see how to set up the environment for getting started with the development using SharePoint Framework. Below are the required components that we will have to install in the environment.
As the first step, we will install NodeJS Long Term Support Version (LTS) which sets up the development environment and adds NPM. We can install Node JS from this link
Once we have downloaded the LTS version, run the executable file and proceed.
Accept the license agreement and click on Next.
We will select Node.js run time installation.
Click on Install to start the installation of Node.js.
Finally we are done with the installation of Node.js
If we run the Node.js command prompt we will get the message as shown below. Thus we can confirm that Node.js has been successfully installed in the local machine.
Now let’s see the version of Node Package Manager (npm) by running the command npm –v . It is running V3 version.
Yeoman is a scaffolding tool for modern web apps. When it comes to SharePoint it has a plugin named ‘Yeoman SharePoint Generator’ to work with SharePoint Framework. It downloads and configures the required tool-chain components for the specified client-side project. It also creates the necessary project structure for the project based on the input we give like Project name and Framework to be used. To sum up, it provides with the common build tools, boilerplate code (standard default code), and test web site (SharePoint Workbench) to host the web parts for testing.
To initiate different tasks, append the task name with the gulp command.Say, for instance if we want to compile and preview the web part in the SharePoint Workbench we use the Gulp Serve command. Each time the Gulp Server command is issued any changes in the code is recompiled and serves the client side solution in the SharePoint Workbench.
So, let’s install Yeoman and Gulp simultaneously by running the below command:
npm install -g yo gulp
We can get the version of Yeoman using the command:
Similarly, We can get the Gulp Version using the command:
Once we have installed Yeoman, lets install The Yeoman SharePoint Generator which is the Yeoman Plugin for scaffolding SharePoint Framework client side project with the right tool chain and project structure.Yeoman SharePoint Generator can be installed using the below command:
npm install -g @microsoft/generator-sharepoint@latest
Once installed, We can get the version of Yeoman Generator by running the below command. As we can see 1.0.0 indicates General Availability version.
npm view @microsoft/generator-sharepoint version
Next we need a code editor that will help us with code editing.Unlike old days where we relied heavily on Visual Studio, We can use any code editor or IDE that supports client-side development to build our web part, such as:
We will use Visual Studio Code in this walk-through which you can get it from here.
Once we have downloaded the exe proceed with the installation.
Click on Install to start the installation procedure.
Finally we have completed installation of the Visual Studio Code editor.
Visual Studio Code:
Once we start the development, we will have to debug or test the application. Fiddler and Postman can help us in this task.
Fiddler is an HTTP debugging proxy server application. It captures HTTP and HTTPS traffic and logs it for the user to review. You can get fiddler from here
Once the executable has been downloaded. Click on Install to set up Fiddler in your local machine.
Using fiddler we can examine the traffic as it is being sent or received.
Postman can be used to test SharePoint’s REST service endpoints and verify the returned data and request headers. We can get Postman from here
Postman can be added to Chrome as an app.
The REST URL can be entered in the Request URL field and we can click on Send to get the SharePoint data.We will see more of how these tools come in handy as we progress through the series.
Thus we saw how to set up the environment for working with SharePoint Framework development model.In the upcoming posts we will see how to get started with the creation of the first client side web part and test it against the SharePoint Workbench . In the subsequent posts we will explore how to integrate PnP JS and React JS with SharePoint Framework and use them to build User Profile and Search Web parts. SharePoint Framework is evolving constantly and more features will be added to it in the coming releases. As of now it is available for use only with SharePoint Online but Microsoft has promised its roll out for SharePoint On Premise as part of a future release.
Priyaranjan is a SharePoint Consultant and Microsoft MVP with 10 years experience in developing and deploying SharePoint Applications.He has worked on various SharePoint iterations starting from MOSS 2007 through SharePoint 2016 and Office 365. He is a frequent contributor at Microsoft TechNet and has won 33 Gold Medals in various TechNet Wiki Guru Monthly Competitions.As a token of appreciation for the TechNet community activities, he was interviewed by Microsoft Program Manager,Ed Price. He has also published 300 Articles and 4 SharePoint Ebooks in different technical communities.You can find his Microsoft TechNet contributions here