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
- Set up your Office 365 tenant: You need at least Developer tenant which you can get from Office Developer Program, set an App catalog site and create a developer site. More details here . Once the site is ready please access SharePoint Workbench here https://replace-with-your-sharepoint-site/_layouts/workbench.aspx
- 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.