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.



THREE QUERIES offers easy access to information about SharePoint and associated technologies, project management, agile and scrum methodologies that helps developers, administrators, architects, technical managers, business analysts and end users. It has grown from there. We provide an important knowledge base for those involved in managing, architecture and developing software projects of all kinds. With weekly/daily exclusive updates, we keep you in touch with the latest business, management, technology thinking.

WE ARE CONNECTED ~ Follow us on social media to get regular updates and opinion on what's happening in the world of SharePoint, front-end, back end web technologies and project management. If you like this article, please share it and follow us at Facebook, Twitter, Instagram and LinkedIn

About Satyendra Mishra

Microsoft certified, motivated, energetic and accomplished SharePoint Consultant and Architect with 13+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. He has been fortunate to be a part of over 20+ Web/Mobile/Software SharePoint and .Net projects delivery with various companies across different industry sectors. This has provided him a valuable insight and experience especially in successful implementation of technology solutions. Having very strong System Architecture, Technological, Management & Analytical Skills, Knowledge of Office 365, SharePoint, .Net, JavaScript, React, Angular, Azure, SQL. In 2016, he decided to start sharing the knowledge back to society in the form for content writing and blogging.
View all posts by Satyendra Mishra →

Leave a Reply

Your email address will not be published. Required fields are marked *