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

https://nodejs.org/en/

https://www.npmjs.com/

http://yeoman.io/learning/index.html

https://gulpjs.com/

http://www.typescriptlang.org/#download-links

https://reactjs.org/docs/hello-world.html

http://cmder.net/

https://dev.office.com/blogs/getting-started-with-sharepoint-framework-tutorials

Leave a comment