Starting Sharepoint Framework (SPFx) Development Environment in your PC

1) Introduction

This article is going to describe how to set up Sharepoint Framework (SPFx) Development Environment locally in your PC. Before you start you must have a little bit knowledge or understanding of following technologies/tools,
  • Sharepoint 2016 or greater (Which supports SPFx)
  • Node.js
  • Npm
  • Typescript
  • Visual Studio Code
2) What is Sharepoint Framework (SPFx)

The SharePoint Framework (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. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready from day one. The SharePoint Framework works for SharePoint Online and soon also for on-premises (SharePoint 2016 Feature Pack 2)

3) Why we should use Sharepoint Framework?

As I personally believe javascript frameworks these days are very matured, secure and high in performance. Most of the cloud based API's can be easily consumed by REST calls. Which increases the need javascript calls from our Sharepoint solutions as well. And with the introduction of Typescript, now developers can write and manage javascript codes pretty easily. And it eliminates the issues of javascript injection (Script Editor trust issues), Sharepoint Add in model (iframe based solution) which are currently used to overcome client side development in Sharepoint. 

As now  we know prerequisites of Sharepoint Framework let's get started. And I hope you have installed the lastest versions of Node,js, npm in your PC.
  1. Open Windows Command Prompt (Windows key + r then type cmd)
  2. Install npm package Webpack - this npm package is used to bundle our css, javascript files into a one single file shipped to or hosted in a server.

    npm install -g webpack
  3. Install npm package Yeoman (yo) - this a package to create and manage templates for node packages and it drastically reduces files we need to create as it creates them for us.

    npm install -g yo
  4. Install npm package gulp - this package is a node based task executor which automates the tasks while you develop your Sharepoint Framework Solutions

    npm install -g gulp
  5. Create a new Folder where our Sharepoint Framework files will be created in my case it is D:\Software\Sharepoint
  6. Now access the Created Folder using Windows Command Prompt (cd D:\Software\Sharepoint in my pc)
  7. Microsoft has already created an npm package/template for the Sharepoint Framework which we must install and use,

    npm install -g @microsoft/generator-sharepoint
  8. Then we will use yeoman's magic to create the files in our folder by executing the following command

    yo @microsoft/sharepoint

    • Then give a name for Sharepoint Framework project
    • Select the baseline packages you need to install we will  install "Sharepoint 2106 onwards including Sharepoint online" as we are targeting Sharepoint 2016
    • Then select the folder where the files will be created I select the "Current folder"
    • Then enter the name for the Sharepoint Webpart  
    • Then enter the description for the Sharepoint Webpart 
    • Then select the javascript framework you need to work with the options are React, Knockout but they are also working on angular too. I will select "No javascript Framework" as this article is just about getting things started
    • Then we will create the Development certificate for the gulp to use https as our Sharepoint Framework uses https for communication by  entering the below command

      gulp trust-dev-cert
    • And finally if you have installed the node version 8.9.0 or above you need to set the below Environment Variable for things to get going smoothly

      set NODE_NO_HTTP2=1
    • Then we will run our first Sharepoint Framework project by using the following command

      gulp serve
  

















4) What's next?

Now since you have successully set the up the Sharepoint Framework (SPFx) locally in your in PC. You can start developing your own Sharepoint Framework (SPFx) webparts and host them. I used Visual Studio Code to develop. To open solution folder in Visual Studio Code


    • Open Windows Command Prompt (Windows key + r then type cmd)
    • Navigate to your Solution Directory (D:\Software\Sharepoint in my pc)
    • Type "code ." and press the enter key











Further Reading/References

Comments