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.
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.
- 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.
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"
![Node.js]()
- Use the current folder for creating project files
![Node.js]()
- For this kind of deployment go with "N"
![Node.js]()
- Choose the client component to create "Webpart"
![Node.js]()
![Node.js]()
- Provide the webpart name "myfirstspfx" is the description by default
![Node.js]()
- Choose the javascript framework you are using to develop your sharepoint client side solution
- No Javascript framework - you can neither use jquery, angular js, javascript.
- React -> it creates a react based Project structure.
- 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
![Node.js]()
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
![Node.js]()
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.