Top 10 Mandatory Tools and Libraries for SharePoint Framework (SPFx)

Suggested Topics


What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)


SharePoint Framework (SPFx) uses several JavaScript tools and libraries to develop client side web parts for SharePoint. You can many of below listed tools and libraries for building such applications. I’ll go one by one to make the clarity on each tool or library.




Typescript is typed framework or superset of JavaScript which is further complied to JavaScript language before deployment on production. SharePoint Framework (SPFx) client side development tools are built on Typescript classes, interfaces and modules. We’ll grasp sufficient knowledge of Typescript as it is required to build client side web parts using SharePoint Framework. The extension of Typescript file is .ts and it is compiled to JavaScript using tsc command.



JavaScript Frameworks

We would also require any of the JavasScript frameworks to build client side web parts. Following are some of the famous frameworks:

  1. React
  2. AngularJS 1.x
  3. Angular2 for Typescript 2.x
  4. Handlebars

Client side web parts are a component that’s why we should use JavaScript framework which supports component model.



Node Package Manager (npm)

SharePoint client side development tools use npm package manager to manage dependencies and required JavaScript helpers. It is included in Node.js setup.




Node.js is open source runtime environment. This is cross platform JavaScript technology, which is used to develop server side web applications in JavaScript. It is tightly coupled with npm and task runner of gulp to provide efficient environment for JavaScript programming. It is like another application server i.e. IIS but it includes tools to simplify client side programming.



Gulp Task Runner

Gulp task runner is used by SharePoint Framework to process bundling, minifying, compiling, deploying processes etc. Below is a list of tasks performed by task runner.

  1. Bundle and minify JavaScript and CSS files.
  1. Run tools to call the bundling and minification tasks before each build.
  2. Compile LESS or SASS files to CSS.
  3. Compile Typescript files to JavaScript.




Webpack is module bundler. It takes web part files & its dependencies and generates one or more JavaScript bundles. We can use different bundles based on our requirements.



Yeoman Generators

Yeoman helps to start your project and it has various solution generators. With the help of appropriate generator, we can build our solution and eventually we can that in our application post customization.

SharePoint Yeoman Generator will be used to generate new client side web part projects.



Source Code Editors

We also require a source code editor to edit our solution. We know, IDE is a best friend of any developer. Below is a list of Source Code Editors, we can use. However, I am using Visual Studio Code for our examples. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP) and runtimes.

  1. Visual Studio Code
  2. Atom
  3. Webstorm



SharePoint REST APIs

SharePoint REST APIs help us to interact with SharePoint and other stuffs which are helpful for client side web part functionalities. SharePoint Framework (SPFx) uses these REST APIs for building client side web parts.



Patterns and Practices

It provides various code samples, patterns, and other resources to help you transform your existing solution to the SharePoint Framework.



What’s next

We have identified required tools and libraries for SharePoint Framework (SPFx) development. In the next article, we’ll see, how to configure Office 365 tenant for SharePoint Framework client side development.

About Satyendra Mishra

An Engineer by education, Satyendra is a PMP certified Project Manager, Author, Blogger and Learner with 13+ years of experience on Project Management, Microsoft Technologies including ASP.NET, ASP.NET MVC, C#, SharePoint (On premises & Office 365), JavaScript Framework (Angular), Xamarin for Android and related technologies. He is a person with belief, sky is limit for a hard working and dedicated individual. That’s why he devoted himself to field of Software Development and now both are growing with each other. Every year for him turned out to be best year and he received enormous support and love from his companies and his clients from around the world. Now with vast knowledge of software development and its outsourcing process, he decided to move himself into knowledge sharing. Keep a fact in your mind about the comfort level of your clients and this will make you king/queen of your area.
View all posts by Satyendra Mishra →