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

Getting Started with Client Side Development in the SharePoint Framework









Show Buttons
Hide Buttons

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.