SPFx Development Step By Step

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.

  1. Node JS
  2. Any Code Editor
  3. Yeoman and Gulp
  4. SharePoint Generator
  1. 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.

  1. Go to the directory where you want to create the WebPart
  2. Create new folder using md demoWebpart
  3. Move to this folder using cd demoWebpart
  4. Now we will create SPFx project using yo @microsoft/sharepoint command
SPFx Development Step by Step | Setup Commands
  1. 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.

SPFx Development Step By Step | SPFx-Environment-Setup

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 :

SPFx Development Step by Step | Deploy-Pakage-In-AppCatalog
Deploy-Pakage-In-AppCatalog

After successfully deployment of package we can see our solution as below

Package-Deploy

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 🙂

5 2 votes
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Srinivas
Srinivas
1 year ago

Good explaination