Setting Up SPFx Developer Environment Using NVM

You can follow the same "Installing Node Version Manager" article mentioned in the References section.

SPFx versions have specific supported Node.js versions, so you should always verify the Node.js version requirements for the SPFx version you are using.

If your installed NVM implementation supports the lts alias, you can use the following command to install the latest Node.js LTS version:

nvm install lts

However, for an SPFx project, use the Node.js version supported by that specific SPFx release rather than automatically choosing the latest LTS version.

Install Gulp

To install the Gulp command-line interface globally, open Command Prompt or PowerShell with the required permissions and run the following command:

npm install gulp-cli --global

After the installation completes, you can verify the installation using:

gulp --version

Install Yeoman

To install Yeoman globally, open Command Prompt or PowerShell with the required permissions and run the following command:

npm install yo --global

After installation, you can verify that Yeoman is available by running:

yo --version

Install Yeoman SharePoint Generator

The Yeoman SharePoint generator is used to scaffold SharePoint Framework projects.

Install it globally using the following command:

npm install @microsoft/generator-sharepoint --global

After the installation, you can use the yo command with the SharePoint generator to create an SPFx project.

For example:

yo @microsoft/sharepoint

The generator will guide you through the project configuration, including the solution name, component type, and other SPFx project settings.

Install Teams Generator

If you are doing Microsoft Teams development using SPFx, you may also need the Teams generator depending on the development approach and project requirements.

You can install it globally using:

npm install generator-teams --global

SPFx Development Environment Overview

After completing the setup, the development environment contains the major tools required for creating and building SPFx solutions.

The overall tool chain can be summarized as follows:

NVM
 |
 +-- Node.js
      |
      +-- NPM
      |
      +-- Gulp
      |
      +-- Yeoman
             |
             +-- SharePoint Generator
             |
             +-- SPFx Project

NVM helps manage Node.js versions, while NPM manages project dependencies. Yeoman and the SharePoint generator provide project scaffolding, and Gulp supports common development tasks such as building and serving the project.

Conclusion

In this article, we understood the SPFx development environment and the major tools involved in the SPFx tool chain.

We also covered how to set up NVM, install Node.js, install Gulp and Yeoman, install the Yeoman SharePoint generator, and install the Teams generator when required.

Having the correct Node.js version and development tools configured is an important first step before creating and working with SharePoint Framework solutions.