DEV Community

BPB Online
BPB Online

Posted on

List Of Components/Tools Used In SPFx Development

SharePoint Framework is also termed as SPFx. SharePoint Framework uses a modern open-source toolchain, Node-based development, TypeScript, and so on, that are used in SharePoint on-premise and Office 365 (SharePoint Online) development.

Following is a similar image showing the comparison between server-side and modern toolchain:

We can see that as compared to previous server-side toolchains like IIS Express, NuGet packages, MS Build, C#, and so on, we will use their client-side open-source toolchain like node JS, npm packages, Gulp, Typescript, and Yeoman for the same purposes. To set up your development environment, node JS, Typescript, and an editor (like Visual Studio code) are the primary tools that need to be installed on your machine.

Here’s an explanation of the modern toolchain required for development in the SharePoint Framework.

Node.js is an open-source JavaScript runtime.

  • It is lightweight and efficient.
  • SPFx supports the latest LTS (Long Term Support) version

‘NPM’ stands for the node package manager.

  • Required as a centralized package registry for SPFx.
  • Installs modules and dependencies.
  • Packages can be installed globally (using -g) or locally. - - Locally installed packages go in the node_modules subfolder.

Gulp is used to automate SPFx development and deployment tasks.

  • Gulp can be used to automate repetitive build processes
  • It is used as the task runner to handle build process tasks.
  • Compiles SASS files to CSS
  • Compiles TypeScript files to JavaScript
  • Ability to compile, bundle, and copy files to deployment directories.

Yeoman is used as a SharePoint web part generator.

  • Yeoman builds out the project structure required; that is, Yeoman is the scaffolding tool for modern web apps.
  • Yeoman relies on NPM and Gulp.
  • yo is the Yeoman command line utility allowing the creation of projects.

Typescript is a strongly typed language.

  • Can catch and resolve syntax errors before run time. (Typescript adds compile-time syntax and types checking to JavaScript)
  • It also supports writing classes and interfaces as required.

Visual Studio Code
Visual Studio code can be used for working with client-side web part projects.

  • Fast and lightweight IDE, which shows the file and folder structure of the project.
  • Visual Studio code is not the same as Visual Studio IDE
  • It is available on Windows, Linux, and Mac OS

This was the list of toolchain comparison and modern open-source toolchains, which will be used in the SharePoint Framework development.

Hope this was helpful to you!

Discussion (0)