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.
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.
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!