SharePoint Framework Development - Setup the Environment


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. 

A Brief History of SharePoint Development Model

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.

Though not a replacement for any of the previous development models, with the SharePoint Framework model, Microsoft is providing an advanced full client side development model which can be used on any platform and with any JavaScript framework like React, Angular, Knockout, Handlebar etc.: to build SharePoint Solutions. It aims at building of client side customization much easier with a streamlined deployment process.  SPFx solutions are rendered within the current user context in the current page DOM (not in an IFRAME) which results in faster performance. More over the strong dependency with Visual Studio has been removed and we can use modern web technologies and tools in our preferred development environment to build SPFx solutions. We will go over these development tools in the upcoming sections.

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.

  • Node JS
  • Yeoman and Gulp
  • Yeoman SharePoint Generator
  • Code Editor(Visual Studio Code/Webstorm)
  • Postman and Fiddler(optional)

Download the guide to setup SharePoint Framework.

Install Node JS

 Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It is a cross-platform runtime environment for hosting and serving JavaScript code. Node.js' package manager, npm, is a command-line package manager that’s similar in concept to the NuGet Package Manager found in Visual Studio. npm package consists of one or more reusable JavaScript code files called modules. SharePoint Framework consists of several npm packages that work together to help developers build client-side experiences in SharePoint, like: @microsoft/sp-core-library, @microsoft/sp-webpart-base, @microsoft/sp-lodash-subset etc.: So, We will be making use of npm to install the package and dependencies. We will be later using the ‘import’ command to use them within the SPFx project. To draw a comparison to the existing .Net Development model, Node.js is like IIS Express/ IIS and NPM is like NuGet.

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. 

Install Yeoman and Gulp

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.

SharePoint Framework uses Gulp as its task runner. Gulp is a JavaScript task runner that helps us automate common tasks like refreshing our browser when we save a file, bundling libraries and CSS, Copying modified files to the output directory etc.  To name a few, it consists of the following gulp tasks that we frequently use to work with the Client Side Project

  • Build : Builds the client-side solution project.
  • Bundle : Bundles the client-side solution project entry point and all its dependencies into a single JavaScript file.
  • Serve : Serves the client-side solution project and assets from the local machine

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:

yo --version

Similarly, We can get the Gulp Version using the command:

gulp –v

Install Yeoman SharePoint Generator

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

Code Editor

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:

  • Visual Studio Code
  •  Atom
  •  Webstorm

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:

Download the guide to setup SharePoint Framework.

Additional Tools for Development and Debugging

Once we start the development, we will have to debug or test the application. Fiddler and Postman can help us in this task. 

Fiddler

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

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. 

Summary

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. 

 

Download the guide to setup SharePoint Framework.

About Author

Priyaranjan is a SharePoint Consultant with 7 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 25 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

If you found this post helpful, please share with your friends!!


Join 6,000 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers