Set up your SharePoint Framework development environment

 Install Node.js

Navigate to https://nodejs.org/dist/ and install the MS recommended LTS version(node-v16.20.2-x64.msi).

Note: The SharePoint Framework supported only in LTS (Lone Term Support) version.

You can check if you already have Node.js already installed, including installed version, by running the following command:

node --version

Open the Node JS command prompt and verify the version of Node.js

Install code editor(VS Code)

Install the any code editor.

https://code.visualstudio.com/ - Please make sure you download System installer.

Run the setup wizard and follow along with the instructions to install. In Additional task link below, use the below preferred option if needed.

destination location: \Program Files\Microsoft VS Code

Install development toolchain prerequisites(Gulp, yeoman and SharePoint Yeoman generator)

Download yeoman and gulp packages using the below commands from Node JS command prompt, we are using -g parameter so that it would be installed globally across your Node JS environment.

Install Gulp: npm install gulp-cli –global

Install Yeoman: npm install yo –global

Install Yeoman SharePoint generator: npm install @microsoft/generator-sharepoint –global

Install the above three in a single line using below command:

npm install gulp-cli yo @microsoft/generator-sharepoint –global

To check the details of SPFx Yeoman generator:

npm view @microsoft/generator-sharepoint