Hi All,

Greetings for the day !!! Today new issue and solution 🙂

Background

• After long time getting chance to work on SPFx component
• Got an assignment (use case) to implement small, simple SPFx component to get some details from users in my organization and save to SharePoint list
• I followed standard guidelines, followed very good article from Microsoft – Set up your SharePoint Framework development environment
• I have installed Node.js, Gulp and Yeomen (yo)
• I am ready to start my SPFx component
• So first step is to create new project by using Yeomen SharePoint Generator as

yo @microsoft/sharepoint

• And error occurred

Issue / Error

‘yo’ is not recognized as an internal or external command, operable program or batch file

• Similar kind of error were there for ‘gulp‘ as well

C:\Users\prasham\Documents\SPFx>gulp
‘gulp’ is not recognized as an internal or external command, operable program or batch file.

Solution / Root cause

• I am wondering even though I have successfully installed the respective tools
• To make sure whether respective tools / components are there or not, I executed following command

npm list --global --depth=0

got the following output

• From above image, output of command – npm list –global –depth=0, it seems respective tools / components are successfully installed 🙂
• After bit googling, I found that it seems PATH is not set for NPM folder. Actually I thought PATH environment variable will be automatically updated for NPM folder
• I executed PATH command for check as

C:\Users\prasham\Documents\SPFx>path
PATH=C:\Program Files (x86)\Microsoft SDKs\Azure\CLI2\wbin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\dotnet\;C:\Program Files\nodejs\;C:\Program Files\PowerShell\7\;C:\Users\s1086350\AppData\Local\Microsoft\WindowsApps;

• It seems PATH is not added for NPM folder
• We need to add NPM folder to PATH
• We have detailed article to Add / Edit / Delete environment variables for Windows 10 (since I have Windows 10 on my local laptop), please have a look – Windows 10 – Setting up environment variables – Adding / updating / deleting
• Here, I wont go to detailed steps as already mentioned in above article
• I’ll directly edit “PATH” environment variable as

• By selecting “Path” environment variable and on click of “Edit…” button from “Environment Variables” dialog we will have “Edit environment variable” dialog will open as in below fig
• On “Edit environment variable” dialog click on “New” button and add following line – Path for NPM folder

%appdata$\npm\;

• Once we updated “PATH” for “NPM” folder, commands started working successfully 🙂

Thanks for reading !!! HAVE a FANTASTIC TIME AHEAD 🙂 LIFE IS BEAUTIFUL 🙂