SPFx is a very powerful and useful feature in modern SharePoint Application Development. In this article, we will see SPFx from scratch with Prerequisites, environment setup, development, and deployment.
So let’s start SPFx development step by step.
Before we start with the environment setup, let’s see what is SPFx.
The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling.
It is used to build the custom solution for modern SharePoint.
SPFx web parts can be added to both classic and modern pages.
- Install NodeJS
Node.js is similar to IIS Express or IIS, but includes tools to simplify client-side development.
If you have already installed node js then you can check version using
node -v command in command prompt otherwise you can download the latest version from here.
2. Code Editor
We can use any code editor for development. It is based on your preference.
Some of the popup code editors are:
- Visual Studio Code
I prefer Visual Studio Code, Visual Studio Code is an open-source, lightweight, and powerful source code editor from Microsoft.
3. Install yeoman and gulp
Yeoman is a web’s scaffolding tool for model web apps, It helps us to kickstart a new project.
It provides various generator plugin that can be run with the
yo command to scaffold complete projects or useful parts.
Using Yeoman, developers can create a webpart, build the projects, create a package and deploy the solutions.
Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks.
At a high level, gulp reads files as streams and pipes the streams to different tasks. These tasks are code-based and use plugins. The tasks modify the files, building source files into production files.
When we create an SPFx solution, we can test, run, build the webparts, and bundle the package using the Gulp tasks. The tasks are defined using
gulpfile. js present in the SPFx solution.
To install Yeoman and gulp, open command prompt and execute the following command.
npm install -g yo gulp
4. SharePoint Generator
SPFx Generator is used to create a new SPFx webpart with a defined project structure.
npm install -g @microsoft/generator-sharepoint
After successful installation of all these command and tools we can start SPFx development
Now we will build our first SPFx Webpart.
- Go to the directory where you want to create the WebPart
- Create new folder using
- Move to this folder using
- Now we will create SPFx project using
- The previous command will ask you some question like
What is your solution name?
We will give the solution name as per our requirement. i.e.
Which baseline packages do you want to target for your component(s)? (Use arrow keys)
There are 3 options available here. so we can select option as per our requirement.
Where do you want to place the files? (Use arrow keys)
There are two options available here. so we can select option as per our context
Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites?
If we will select yes then our webpart will be deployed to all the sites immediately.
Will the components in the solution require permission to access web APIs that are unique and not shared with other components in the tenant?
We can select Yes/No as per our business requirement.
Which type of client-side component to create?
There are 3 options available (Webpart, Extension, Library), here we want to create a Webpart, so we will select Webpart optio.
What is your Web part name?
We will give our web part name .
What is your Web part description?
we will give brief description of our webpart.
Which framework would you like to use?
It will ask for
Now it will install all the required dependencies for the project, it may take 5-10 minutes.
After successfully creating a project we will run our solution.
So, we will run solution using
gulp serve command. this command will open the
workbench.html on the localhost server to add the webpart. If you want to run this webpart in SharePoint Site then we can use URL like this
SharePoint Site URL + "_layouts/15/workbench.aspx".
If the project is working properly on a local server without any error, We can deploy it on server. We can deploy it using the following two commands
gulp bundle --ship
This command bundle all the typescript files and it’s dependencies from
gulp package-solution --ship
This command creates the
.sppkg file in sharepoint folder, we will upload this package in app catalog site.
After successfully creating package, we will move to the Apps for SharePoint in app catalog site of our tenant and here we will upload our package.
While uploading this package it will open a popup as below :
After successfully deployment of package we can see our solution as below
Now we can add this webpart in our SharePoint site.
So, move to the SharePoint Site and go to the Site Pages > Click on New > Site Page > Give the page name > Click on + Icon > here we can see our webpart > now add webpart and see output.
Great !!! We are done with all steps ✨✨✨
In this article we have seen SPFx development step by step,
We have seen how to setup SPFx environment, Create SPFx webpart, Run webpart and deploy it in App catalog site.
I hope you like this article, give your valuable feedback and suggestions in comment section below.
Sharing is Caring.
Happy Coding 🙂