SPFX SharePoint : Building your environment for client side webpart #spfx #spfxsharepoint

As of 22nd feb 2017 GA version of SPFX SharePoint Framework has been released. SharePoint Framework SPFX that is client side web part is a new framework introduced to provide one more option for client-side development other than Script Editor based and Add-in model.

The new framework is based on both of the existing solutions but in most of the scenarios SPFX is a preferred way to develop, two major plus points

  • Responsive controls
  • Can be deployed on modern pages and classic web part pages as well

More information can be read here Why SPFx

Building your environment for doing development using SPFX is very welll documented on this article but while doing the same for me I got few issues so I am just going to highlight few points which I thought was confusing or should be highlighted

There are four major things you need to do to set up your development environment

 

  • Install Node JS : You need to install Node JS, make sure you do install LTS version from here https://nodejs.org/en/ . Unfortunately I installed it from here first time and it did not workout good https://nodejs.org/en/download/ . Refer more details here
  • Install Yeoman and gulp : Once Node JS installation is done you should run below commands to install Yeoman and gulp, make sure you run these commands in Windows PowerShell, I have assumed that you are using a Windows 10 machine. Also I tried using CMD prompt but it did not work out good. Also make sure you create a separated folder under C Drive and then perform all the steps
    • npm install -g npm
    • npm install -g yo gulp
    • npm install -g @microsoft/generator-sharepoint
  • Install Visual studio code : Install Visual Studio code from here 

If all steps are successful then your development environment is set up and you are ready to develop your first client side web part.

In case you need more help on this or other SharePoint issues please contact us via our Contact Us page or via our Facebook page or via Twitter

Like us on Facebook and follow us on Twitter