SharePoint Framework Overview

What is SharePoint Framework?

SharePoint Framework is a new development model that provides full support for client-side SharePoint development by using open source client developments tools. The SharePoint Framework is the next evolution in SharePoint development.

SharePoint Framework works for SharePoint Online & SharePoint On-Premise (SharePoint 2016 Feature Pack 2). SharePoint Framework can be used  for developing client-side web part & extensions


SharePoint Framework development toolchain is based on common open source development tools npm, TypeScript, Yeoman, webpack & gulp.

SharePoint framework toolchain

SharePoint Add-in model



Set up SharePoint Framework development environment

You can use Windows, Mac, or Linux machine for doing SharePoint Framework development. You should Install developer tools:

Client side web parts

Client-side web parts are client-side components that run inside the context of a SharePoint page. Client-side web parts can be deployed to SharePoint Online, and you can also use modern JavaScript tools and libraries to build them.

Client-side web parts can run on SharePoint Online and on-premise environment (SharePoint 2016 Feature Pack 2). Once you have configured SharePoint Framework dev environment, a client-side web part can be created in few steps.

sharepoint framework client webpart


SharePoint Framework extensions are client-side components that run inside the context of a SharePoint page. Extensions can be used to extend the SharePoint user experience. Extensions can be used to customize user experience within modern pages and document libraries. SharePoint Framework includes three new extensions types:


SharePoint Framework extension application customizer



SharePoint Framework extension field customizer


SharePoint Framework extension command set


One new part of the build toolset for SharePoint Framework is called Workbench. Workbench is a tool that can de used by developers to build and test their SPFx solutions. There are two versions of the workbench 1. Local workbench 2. SharePoint Hosted workbench.

Local Workbench: 

Local workbench runs locally on the development machine and do not have connection with SharePoint. This workbench can be used to test functionality of web part with mock/dummy data. Local workbench URL is https://localhost:4321/temp/workbench.html

local workbench


SharePoint Hosted Workbench:

SharePoint Hosted workbench is hosted inside SharePoint and is used to build & test the web part by using SharePoint data and context. you can access SharePoint hosted workbench by opening this application page _layouts/15/workbench.aspx, complete URL will look like https://[tenantname]


hosted workbench