Build Your First SPFx Client-side Web Part

Introduction

Client-side web parts are client-side components that run inside the context of SharePoint page. Client-side web parts support following:

  • Building with HTML and JavaScript
  • Both SharePoint Online and SharePoint on-premises environment

Before performing the following steps mentioned in this blog post make sure that you already have set up your SPFx development environment like I did in my previous blog post.

Let’s start the process of creating first client-side web part on top of SharePoint framework (SPFx).

Create a New Web Part Project

Open Node.JS command prompt from your system start menu.

Infographics show the NodeJS command

Create a New Folder in Your Favorite Location:

I will create new project directory “First-webpart” inside “d” drive by entering following command:

MD First-webpart:

Infographics show the MD's first

Go to Project Directory:

Enter following command to go to project directory

CD First-webpart:

Infographics show the cd First-webpart.

You can see in below screenshot that you are now at your project directory.

Create Your New First Web Part:

Infographics show the project directory

Enter the following command onto Node.JS command prompt

yo @microsoft/sharepoint

Infographics show the Microsoft SharePoint

When prompted, enter the following Solution name.

  • Select SharePoint Online (latest)
  • Select N to allow solution to be deployed to all sites immediately
  • Select WebPart as the client-side component
  • Default web part name (first-webpart)
  • Default web part description (first-webpart description)
  • Accept the React as JavaScript framework.
Infographics show the React as JavaScript framework

It will take few minutes to create your first web part. After successful creation, you will see a congratulation message like in the below given screenshot:

Infographics show the first web part

Streamline Collaboration with Custom SharePoint Solutions

Discover how custom SPFx client-side web parts can enhance your SharePoint environment. AlphaBOLD SharePoint consulting services provide tailored solutions that drive efficiency and collaboration across your organization.

Request a Consultation

Preview Your Web Part:

You can preview your web part even before deploying it to SharePoint. To preview your web part at localhost, enter following command onto Node.JS command prompt:

Gulp-serve

Infographics show the gulp-serve

Note: SharePoint development tools use gulp as the task runner to handle build process tasks such as:

  • Bundling and minifying JavaScript and CSS file.
  • Call the bundling and minification tasks by running tools before each build.
  • Compiling SASS to CSS
  • Compiling TypeScript files to JavaScript.

After successful run of “gulp serve” command a workbench page will be open in browser

Infographics show the gulp workbench-page
Infographics show the workbench page 2

Click on “+” sign and click first-webpart. You will notice that the web part is added on the page.

Infographics show the welcome to SharePoint

That’s it your first Spfx client-side web part is added on the page.

Transform Your Digital Workspace with SPFx and SharePoint

From design to deployment, our SharePoint experts will help you build powerful SPFx web parts that integrate seamlessly into your SharePoint environment, enhancing your organization’s productivity.

Request a Consultation

Conclusion

We can create new client-side web parts by running few commands onto Node.JS command prompt and, we can test and preview web parts without deploying on SharePoint. In next blog post, you will see web part deployment steps on SharePoint tenant and how you can add deployed web parts on SharePoint modern page.

If you have any question or queries, do not hesitate to reach out to us

Explore Recent Blog Posts