Introduction & Setting Up the SharePoint Framework

SPFx Tools

Why the SharePoint Framework?

Traditional SharePoint Approach:

  • SharePoint custom development – Initially developed server-side code solutions which were deployed in SharePoint Hive as Sandbox Solutions or Full Trust code deployments which was a problem in hosted SharePoint deployments such as Office 365.
  • Later JavaScript Injection concepts developed by using content editor web parts or script editor web parts, but it can be easily manipulated who ever have page customization rights which would break the entire application. 
  • While add-ins/apps addressed the issue partly but limits capabilities for developers. These add-ins are deployed in a Sub Web and includes IFRAME which restricts page responsiveness.

Modern SharePoint Approach:

  • SharePoint Framework customization’s execute within the client-side environment. The script which is developed using client-side development runs in the context of current page and the only way to customize modern pages in SharePoint.
    • Provides full support for client-side customization
    • Provides easy access to SharePoint data
    • Customization’s run under current context
    • Customization’s are responsive and accessible
    • Customization’s work in classic & modern pages

Support matrix for SPFx in the three most recent environments:

  • SharePoint Server 2016 (with Feature Pack 2) supports SharePoint Framework v1.1
  • SharePoint Server 2019 supports SharePoint Framework <= v1.4.1
  • SharePoint Online supports all versions of SharePoint Framework

Which Version of the SharePoint Framework Should You Install?

Always install the most recent version of the generator, regardless of your SharePoint environment

  • Install @microsoft/generator-sharepoint v1.9.1 if you are building for SharePoint Server 2016 (with Feature Pack 2)
  • Install @microsoft/generator-sharepoint v1.9.1 if you are building for SharePoint Server 2019
  • Install @microsoft/generator-sharepoint v1.9.1 if you are building for SharePoint Online

There are multiple reasons why you should always use the latest version of the generator:

  • It contains all of the latest updates and fixes that apply to any/all environments.
  • It contains all performance optimizations & improvements to the generator’s process in creating a project.
  • It contains all changes to the project templates, such as omitting or including specific packages in the project’s package.json file.

Understanding the SharePoint Framework Development Tool-chain

You need SharePoint developer tenant. This environment will also have a copy of the SharePoint workbench that will be used as test environment for client-side web parts. The workbench is a locally hosted page that can host your SharePoint client-side web parts.

Now let’s see the tool set required:


Node.js (Node) is an open source development platform for executing JavaScript code server-side. Node is useful for developing applications that require a persistent connection from the browser to the server and is often used for real-time applications. This is the runtime that knows how to run the programs.

Node.js is intended to run on a dedicated HTTP server and to employ a single thread with one process at a time. Node.js applications are event-based and run asynchronously. Code built on the Node platform does not follow the traditional model of receive, process, send, wait, receive. Instead, Node processes incoming requests in a constant event stack and sends small requests one after the other without waiting for responses.

  • Open source JavaScript runtime
  • Responsible to build and run the applications
  • SPFx supports Long Term Support Version, preferably 10.x


NPM is installed with Node.js. The name NPM (Node Package Manager) stems from when NPM first was created as a package manager for Node.js. NPM can manage dependencies. Use NPM to get packages for our customizations need like Angular, React, jQuery or other useful libraries.

  • Package Manager for JavaScript libraries
  • Maintains an online repository (npm registry) to find and deploy new packages
  • Installs packages and its dependencies
  • Packages can be installed globally (-g switch) or locally
  • Installed packages are available inside the node_modules folder


Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. At a high level, gulp reads files as streams and pipes the streams to different tasks. These tasks are code-based and use plugins. The tasks modify the files, building source files into production files. So, gulp allows you to write tasks using JavaScript and then tell gulp to run those tasks.

  • Automates SPFx development and deployment tasks
  • Bundles and minifies JavaScript and CSS files
  • Runs tools to call the bundling and minification tasks before each build
  • Compiles LESS or SASS files to CSS
  • Compiles TypeScript files to JavaScript
  • Compiles, bundles and copies files to the deployment folder for packaging


Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. It provides a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts.

  • Relies on NPM and Gulp
  • Scaffolding tool for Modern web apps
  • SPFx Solution generator
  • “yo” is the command line utility to build the project structure
  • The Yeoman generator for creating the SharePoint Framework project is available from Microsoft

Type Script (Development Language)

  • Strongly types language
  • Adds compile-tile syntax and type checking for JavaScript
  • Gets compiled to JavaScript code

Visual Studio Code (Development IDE)

  • Free, open source IDE for SPFx solutions
  • Fast and lightweight
  • Can work on any operating system, including Windows, Mac OS and Linux
  • Offers functionalities like Intellisense, debugging, source control and file management.
  • Supports third-party extensions
  • Automatically updates itself

Additional IDE useful tools – ATOM & WebStorm

SharePoint Workbench

  • The HTML Page served by Node.js on a local file system
  • It provides sample canvas to add web parts
  • The local SharePoint workbench is available as workbench.html on localhost
  • On the SharePoint Site, it is available as workbench.aspx served from hive folder
  • Responsive in nature

Set up of development environment for SPFx

Install NodeJs

  • Install the latest LTS version from NodeJS (ex: 10.x)
  • If you already have NodeJS installed, check the version by running the following command:

node -v

Install Yeoman and Gulp

             npm install -g yo gulp 

Install Yeoman SharePoint Generator

npm install -g @microsoft/generator-sharepoint

  • If you already have the Yeoman SharePoint Generator installed, check the version by command below

npm ls -g @microsoft/generator-sharepoint -g -depth=0

Install Code Editor

Update NPM Packages

To check the outdated packages

                npm outdated -global (This command will report packages the needs update)

                npm update -g <package-name> (Update each package listed by above command)

npm update -g (for all packages)

To list all global packages

npm ls -g --depth=0


You may also like

Leave a Reply

Your email address will not be published.