Getting Started With SharePoint Framework (SPFX)

In this article, I have explained how to set up SharePoint framework development environment, and how to build a SharePoint framework web part from scratch.

 

Sharepoint framework

 

SPFx- SharePoint framework is the latest web part development model that is fully supported by advanced client-side frameworks like jQuery, JavaScript, ReactJS, Angular. SPFx does not support C# assemblies. SharePoint framework works on both SharePoint online and SharePoint on-premise 2016.

 

Advantages of SharePoint framework 

• Reliable  performance 
• Mobile responsive when developing from scratch.
• Supports open source client side development tools like NPM, Node js, Yeoman, Gulp, Webpack.
• SharePoint framework web part supports both SharePoint online and SharePoint on-premise versions.
• It runs in the context of the current user and it does not support iframes.
• Supports Javascript frameworks like Angular, React, Knockout JS.

In this step, I am going to show you how to set up Sharepoint framework-spfx development environment.

 

Basic Hardware Required

80GB HDD Space, 4GB Memory.

 

Tools required

Node js, Gulp, Yeoman Generator for SharePoint, Visual Studio Editor.

 

Open Windows PowerShell. 

 

Type node -v   it checks the node.js version installed on your machine. 

 

If not installed, navigate to https://nodejs.org 

 

 

Click on 8.9.4 LTS. Currently, SharePoint framework supports this node.js version.

 

Click on Download -> Click to run the nodejs.exe.

 

 

Click Next  -> accept license agreement -> click Next.

 

Choose all the options by default and click Install.

 

 

 

Click "Finish" to complete the setup -> open Windows PowerShell -> Type node -v

 

It shows the version of node js installed on your machine.

 

 

 

Download the editor for spfx development "Visual Studio code".

 

https://code.visualstudio.com/download  

 

 

My machine is running on Windows operating system so downloaded the Windows msi installer.

 

Run the installer file -> Click next accept the microsoft license aggrement  -> click next  -> Enable desktop icon if you want -> Enable "Open the code" action to Windows Explorer helps to reveal the file in explorer from Visual Studio Code -> click Install.

  

 

 

Open Windows PowerShell and type "code ." 

 

 

 

Now, I am going to install Gulp and Yeoman for SharePoint.

 

Yeoman helps to kick start new projects prescribing best practices and tools help you stay productive. SharePoint client side development includes a Yeoman generator for developing new webparts.

 

Install Yeoman and gulp from Windows PowerShell.

 

npm i -g yo gulp

• npm defines node package manager, i
• i stands for install 
• -g stands for installed globally in your environment  

 

It takes some time to complete the installation; it depends on connectivity

 

 

 

npm -g list --depth=0 

 

Helps to list all the packages installed globally in your environment

 

 

 

Install Sharepoint Yeoman Generator

 

Yeoman generator helps you to quicly create a Sharepoint client developement project

 

 npm install -g @microsoft/generator-sharepoint 

 

 

 

 Now, we are ready to create SharePoint framework webparts in both, SharePoint online and on-premises.

 

Open Windows PowerShell.

 

Make a directory named "myfirstspfx"  client-side solution.

 

 

 

 Create a directory to develop an SPFx client-side solution.

 

yo @microsoft/sharepoint

 

 

• Provide your client side solution name
  
  
  

• Choose the baseline package for SharePoint online or SharePoint 2016 on-premises. Now, I am going with "Sharepoint online"
  
   

•  Use the current folder for creating project files
  
   

•  For this kind of deployment go with "N"
  
  
  

•  Choose the client component to create "Webpart"
  
   
  
  
  

• Provide the webpart name "myfirstspfx"  is the description by default 
  
  
  
• Choose the javascript framework you are using to develop your sharepoint client side solution

1. No Javascript framework - you can neither use jquery, angular js, javascript.
2. React -> it creates a react based Project structure.
3. knockoutJs -> It creates a knockjs based project structure.

Choose "No javascript framework"

 

So it starts creating project files  

 

 

 

 So now the solution has been created successfully

 

 

 

Open the solution type code .

 

 

 

The project files have been created successfully

 

Under src -> webparts -> open myfirstspfxwebpart.ts

 

 
 

Run "Gulp serve"

 

 

Local work bench has been initiated

 

Click on the plus icon to add a "webpart" in the context

 

Open Sharepoint site workbench "https://{tenant}/sites/modern/_layouts/15/workbench.aspx" it will run the solution into your sharepoint site without deploying into the tenant

 

So, in this article, you saw how to set up SPFx developement environment and you are now able to create your first spfx webpart.

 

In the upcoming articles, we will discuss how to play with SharePoint data and deploy your framework solution into SharePoint.