Creating your first SPFx client-side web part

SharePoint Framework (SPFx) is a powerful development model provided by Microsoft for building client-side web parts in SharePoint. We’ll walk you through the steps of making your first SPFx client-side web component in this blog post. You may set up your development environment, construct the project structure, and test your web part using SharePoint workbench by following these instructions.

Now, we will see how to create our first SPFx client-side web part.

Open Nodejs command prompt, I prefer Nodejs command prompt, but you can use any command prompt.

First, create a folder and navigate to that folder using the command below.

md HR365SPFXWebPart

cd HR365SPFXWebPart

Now run the below command.

yo @microsoft/sharepoint

The above command will help us to create the project structure of the SharePoint client solution. And you can see a welcome message below:

Now we will be asked for the following things. You can either accept the default settings or change them as well.

What is the name of your solution? Press Enter to accept the default name or type to change the name of the solution.

What type of client-side component should be created? Select WebPart.

What is the name of your web part? By default, it will show HelloWorld,

What is the description of your web part? Select the default description.

What framework do you want to use? Select No JavaScript framework.

If you want to develop with React or Knockout, you can select any framework.

Now all the files in the folder we created will be created and imported. Creating the SharePoint framework client web part will take some time. It looks like this:

If the first time you are developing the client-side web part in spfx, then run the below command once.

If you are developing the client-side web part in spfx for the first time, run the command below once.

gulp trust-dev-cert

You will be prompted to install a certificate. Click Yes.

Once the installation is complete, you will see the following screen.

Once the SharePoint framework client web part is successfully created, use the following command to open the SharePoint project with visual studio code.

code . (Code space dot)

You can also open visual studio code directly. Open visual studio code and add a workspace folder or open folder and then select our SharePoint framework client page web part folder.

Now you can see how the SPFx client-side web part structure looks like below:

src: This is one of the most important folders and we will be modifying most of the files in this folder as we add functionality to the web parts.
config: This folder contains configuration files. We will also modify some files from this folder.
dist: This folder contains the distributable files, i.e., the typescript files compiled to JavaScript files.
lib: This folder contains compile-time files.
node_modules: This folder contains all the dependency files. These are needed for the SPFx development environment to work.
temp: This folder contains temporary files used by the SPFx development environment.
.editorconfig: This configuration file defines how the Visual Studio Code Editor works in this folder. Information such as whether an indentation style is based on a tab or a space, and how many characters are used to indent with a tab click.
.gitignore: This file instructs Git to ignore certain files.
.npmignore: This file instructs npm to ignore certain files.
.yo-rc.json: This json file contains information about the Yeoman generator used in this project.
js: This is a Gulp configuration file. This file executes the Gulp command in this folder.
json: This file is used by npm and also defines the dependencies and their versions.
md: This is the documentation file of the web part.
json: This file contains TypeScript compilation options.

SharePoint framework client web part folder structure

Now we should know the SharePoint framework client-side web part folder structure to understand a few important files and folders.

src is the most important folder and in it, you can see our web part (.tsx) as selected below where we can add or modify code.

Below is the code in our web part rendering method that you can change.

<section className={`${styles.hr365SpfxWebPart} ${hasTeamsContext ? styles.teams : ”}`}>

<div className={styles.welcome}>

<img alt=”” src={isDarkTheme ? require(‘../assets/welcome-dark.png’) : require(‘../assets/welcome-light.png’)} className={styles.welcomeImage} />

<h2>Well done, {escape(userDisplayName)}!</h2>

<div>{environmentMessage}</div>

<div>Web part property value: <strong>{escape(description)}</strong></div>

</div>

<div>

<h3>Welcome to SharePoint Framework!</h3>

<p>

The SharePoint Framework (SPFx) is an extensibility model for Microsoft Viva, Microsoft Teams, and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.

</p>

<h4>Learn more about SPFx development:</h4>

<ul className={styles.links}>

<li><a href=”https://aka.ms/spfx” target=”_blank” rel=”noreferrer”>SharePoint Framework Overview</a></li>

<li><a href=”https://aka.ms/spfx-yeoman-graph” target=”_blank” rel=”noreferrer”>Use Microsoft Graph in your solution</a></li>

<li><a href=”https://aka.ms/spfx-yeoman-teams” target=”_blank” rel=”noreferrer”>Build for Microsoft Teams using SharePoint Framework</a></li>

<li><a href=”https://aka.ms/spfx-yeoman-viva” target=”_blank” rel=”noreferrer”>Build for Microsoft Viva Connections using SharePoint Framework</a></li>

<li><a href=”https://aka.ms/spfx-yeoman-store” target=”_blank” rel=”noreferrer”>Publish SharePoint Framework applications to the marketplace</a></li>

<li><a href=”https://aka.ms/spfx-yeoman-api” target=”_blank” rel=”noreferrer”>SharePoint Framework API reference</a></li>

<li><a href=”https://aka.ms/m365pnp” target=”_blank” rel=”noreferrer”>Microsoft 365 Developer Community</a></li>

</ul>

</div>

</section>

Test SharePoint framework client web part using SharePoint workbench

Now we will see how to test the SharePoint client web part using SharePoint Workbench.

In the same command prompt, run the following gulp serve command.

Or you can also use the Visual Studio code Terminal (View -> Terminal), to run the gulp serve command prompt.

If you open any SharePoint site and navigate to the SharePoint Workbench, you can add the SPFx client-side web part as follows:

{{SiteURL}}/_layouts/15/workbench.aspx

The SharePoint client-side web part will also be available in the SharePoint Workbench, as you can see below (assuming your local Workbench is running):

We can add the SPFx web part to the SharePoint Workbench above.

You should see the following output,

If you see the above output, it means you have successfully created your first client-side web part.

Any time to stop the SharePoint workbench, run the below command.

Ctrl + C and then Type Y and click Enter.

Well done! You have successfully generated your first SPFx client-side web component. We went over how to set up the project, create the project structure, and test the web portion using SharePoint Workbench in this blog post. You can now build on this foundation by customizing SharePoint experiences with SPFx client-side web parts.

Happy coding!

About HR365

HR365 leads and serves the industry in application development with focus on Power Apps, Microsoft Teams Apps, SharePoint Apps, Intranet branding, legacy app migration, and has out of box ready to deploy such as Employee Directory 365, Employee Onboarding 365, Helpdesk 365, Contract Management 365, Asset Management 365, Performance Management 365, Timesheet 365, Expense Tracker 365, Time Off Manager 365, and Custom Application. Click Here for more.