July 21, 2024

SamTech 365

PowerPlatform, Power Apps, Power Automate, PVA, SharePoint, C#, .Net, SQL, Azure News, Tips ….etc

Setting up SharePoint Framework Development Environment

1. Setting up you SPfx Dev Environment


  • Install Node JS

    • Install NodeJS Long Term Support (LTS) version from here
    • After installation, Typ npm -v to verify the version. Make sure you are running V3 version of npm.
    • You can use nodejs commandline or  CMDER or Windows powershell tool to run npm in windows.
  • Install Yeoman

    Yeoman is the modern scaffolding tool. It helps you kick-start new projects, and prescribes best practices and tools to help you stay productive.

    • Type npm install -g yo to install Yeoman
    • It is a good idea to check that everything is installed as expected by running commonly used Yeoman commands like below::yo –version
  • Install Gulp

    Gulp is a javascript task runner that lets you automate tasks such as Bundling and minifying libraries and stylesheets,Refreshing your browser when you save a file,Quickly running unit tests, Copying modified files to an output directory etc.

    • Install the gulp command npm install –global gulp-cli
  • Install Yeoman SharePoint Generator

    The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure.

    • Enter the following command to install the Yeoman SharePoint generator:
      npm install -g @microsoft/generator-sharepoint
  • Update NPM to latest version

    • npm -g install npm@next
  • Install windows build toos

    • npm install –global –production windows-build-tools
  • Install Yeoman SharePoint Generator

    • nom i -g @microsoft/generator-sharepoint
  • Create an App Catalog

    • Browse to https://Tenant-Admin.sharepointonline.com
    • Apps -> App catalog


2. Steps for creating SharePoint client side WebParts:

  • Create a folder for your project
  • Start Web Part
    • yo @microsoft/sharepoint
  • Edit your webpart with TypeScript in VS, VS Code (or any other editor)
  • Test locally
  • Test in Modern and Classic Pages
  • Deploy to CDN w/Gulp
  • Test CDN based assets in SP
  • DONE !!

3. Example

  • md Folder
  • yo @microsoft/sharepoint
  • Define your webpart
  • run gulp serv
  • Have FUN !!

Extra – Userful links