How to setup SharePoint Framework (SPFx) development Environment

If you want to start to develop for SharePoint Online, your first step will be to setup SPFx development Environment.

The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development

It works for SharePoint Online and also for on-premises (SharePoint 2016 Feature Pack 2 and SharePoint 2019). SPFx represents easy integration with SharePoint data, and support for open source tooling.

Key features of the SharePoint Framework include the following:

• It runs in the context of the current user and connection in the browser. There are no iFrames for the customization (JavaScript is embedded directly to the page).
• The controls are rendered in the normal page DOM.
• The controls are responsive and accessible by nature.
• It enables the developer to access the lifecycle in addition to render, load, serialize and deserialize, configuration changes, and more.
• It is framework-agnostic. You can use any JavaScript framework that you like: React, Handlebars, Knockout, Angular, and more.
• The toolchain is based on common open source client development tools such as npm, TypeScript, Yeoman, webpack, and gulp.
• Performance is reliable.
• End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites.
• SPFx web parts can be added to both classic and modern pages.

These are steps to setup SPFx development Environment :

Prerequests :

First you need to setup your Office 365 tenant :

1) Create app catalog
2) Create developer site collection

1) Install Node JS

Download Node JS from https://nodejs.org , and install it.

2) Download and install code editor

You can use any code editor or IDE that supports client-side development to build your web part, such as:

1) Visual studio Code
2) Atom

3) Install Yeoman and gulp

Yeoman helps you kick-start new projects, and prescribes best practices and tools to help you stay productive. SharePoint client-side development tools include a Yeoman generator for creating new web parts.

 For install, in node.js type this command : 
      npm install -g yo gulp 

4) 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.

For install, in node.js type this command :
    npm install -g @microsoft/generator-sharepoint 

5) Trusting the self-signed developer certificate

Once a project has been created with the Yeoman generator for the SharePoint Framework, execute the following command from within the root folder of the project :

 gulp trust-dev-cert 

Now, you are ready to start develop new SPFx projects!