Build your first SPFx client-side web part

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.

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

md First-webpart

Go to project directory

Enter following command to go to project directory

cd First-webpart

cd First-webpart

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

project directory

Create your new first web part

Enter the following command onto Node.JS command prompt

yo @microsoft/sharepoint

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.

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:

first web part

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

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

gulp workbench-page

workbench page 2

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

welcome to sharepoint

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

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.

Leave a Reply

Your email address will not be published. Required fields are marked *