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.
It is purely scripting language so we can use any JavaScript framework like ReactJS, Knockout, Angular etc.
SPFx web parts can be added to both classic and modern pages.
We required the following tools to start with SPFx Development.
- Install NodeJS
NodeJS is an open-source, cross-platform runtime environment for hosting and serving JavaScript code.
we can use NodeJS to develop server-side web applications written in JavaScript.
The NodeJS ecosystem is tightly coupled with npm and task runners such as gulp to provide an efficient environment for building JavaScript-based applications.
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
- Atom
- SublimeText
- Webstorm
- IntelliJ
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
md demoWebpart - Move to this folder using
cd demoWebpart - Now we will create SPFx project using
yo @microsoft/sharepointcommand
- 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. demoWebpart
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 No Javascript Framework, React and Knockout Js so we will select as per our requirement.
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 node_modules into a single JavaScript compiled file. it will generate bundle files in temp/deploy folder.
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 ✨✨✨
Summary
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 🙂
Good explaination
Thanks for your valuable feedback