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.

Learn more about our SharePoint Services 

Learn More

 

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.

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

Go to project directory

Enter following command to go to project directory

cd First-webpart

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

Create your new first web part

Enter the following command onto Node.JS command prompt

yo @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.

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:

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

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

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

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

Explore our SharePoint Services 

Learn More

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!