Starting Sharepoint Framework (SPFx) Development Environment in your PC

Author: Shahim Sadakath

1) Introduction

This article is going to describe how to set up harepoint Framework (SPFx) Development Environment locally in your PC. Before you start you must have a little bit knowledge or understanding of following technologies/tools,

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 webpack
  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

Tags: Sharepoint Framework SPFx
Views: 1111
Register for more exciting articles


Please login or register to post a comment.

There are currently no comments.