Develop your first hello world web part in sharepoint framework (SPFx)

No comments

 6,860 total views,  2 views today

In this tutorial, we will learn how we can develop the first hello world web part step by step in the SharePoint framework aka SPFx. The SharePoint Framework (SPFx) is the modern way of customizing the SharePoint or building a new solution that supports both in SharePoint online as well as SharePoint on-premise (SharePoint 2016 & SharePoint 2019).

 

Step by step – create SharePoint hello world web part in SPFx:

Before going to this, I would recommend to set up the development environment for SharePoint Framework (SPFx), if you have not done yet, in the previous article I have explained this how we can set up – SharePoint Framework (SPFx) development environment Setup step by step

Step: Create a new web part project process

  1. Open the node.js command prompt and go to your desired folder path where you want to create your project.
cd C:\Temp\SPFx
Hello World Project location in SPFx Framework
Hello World Project location in SPFx Framework

Note:

  • If you have installed node.js – you can use any of the commands prompts like windows command prompt, PowerShell or Node.js command prompt. 

2. Create a new project folder in the above location, using the below command:

md Helloworld-Webpart

Then navigate to the newly created folder “Helloworld-Webpart” using the below command:

cd Helloworld-Webpart
Hello World Project location in SPFx Framework using md command
Hello World Project location in SPFx Framework using md command

 

[wp_ad_camp_1]

3. Run the Yeoman SharePoint Generator – to create the SharePoint project scaffolding.

yo @microsoft/sharepoint

After a few seconds, we will be asked to pass the parameters in a sequence, so in most of the parameters,  pass the default selection as-is:

  1. Accept the default helloworld-webpart as your solution name, and then press the enter key.
  2. Select SharePoint Online only (latest), for Which baseline packages do you want to target for your component(s)? and press the enter key.
  3. Select Use the current folder for where do you want to place the files?
  4. Select N  for “Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without
    running any feature deployment or adding apps in sites? “
  5. Select N for “Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant?” 
  6. Select WebPart for “Which type of client-side component to create?” 

Notes:

We can create below three types of project in SharePoint Framework (SPFx):

  • WebPart
  • Extension 
  • Library

Now in the subsequent prompts – it will ask the specific input about the web part.

1. What is your Web part name? (HelloWorld) - hit enter key
2. What is your Web part description? (HelloWorld description)-hit enter key
3. Which framework would you like to use? (Use arrow keys) - select No JavaScript framework

 

Notes:

There are three types of frameworks available, such as:

  • No JavaScript framework
  • React
  • Knockout

Finally, the yo @microsoft/sharepoint – SPFX webpart project paramaters will look like below:

yo @microsoft/sharepoint - SPFX webpart project paramaters
yo @microsoft/sharepoint – SPFX web part project parameters

 

[wp_ad_camp_2]

Now at this moment, Yeoman installs the required dependencies and scaffolds the project solution files along with the HelloWorld web part. This generally takes a few minutes (5 to 10 minutes).

yo @microsoft/sharepoint – In Progress:

yo microsoft sharepoint command exectution is in progress - SPFX webpart project
yo @microsoft/sharepoint command execution is in progress – SPFX web part project

Once the scaffolding process is completed, you should see the following message indicating a successful scaffold.

SharePoint Framework SPFX - project scaffolding is completed
SharePoint Framework SPFX – project scaffolding is completed

Notes:

  • While running the “yo @microsoft/sharepoint” command we may get some errors like below:
found 1918 vulnerabilities (1861 low, 13 moderate, 44 high)
run `npm audit fix` to fix them, or `npm audit` for details
  • To fix the above error run the “npm audit fix” or “npm audit fix –force”.
  • Most of the errors can be fixed by running some certain commands which will be displayed in the error description – this is the beauty of the SharePoint Framework (SPFx).

Step: Preview the web part

We need to run the “gulp trust-dev-cert” one time in your development machine to trust the certificate – if you have already executed this command during the prerequisites of the SharePoint Framework installation, you can ignore this.  

gulp trust-dev-cert

Run the gulp serve command 

gulp serve
Error: Invalid glob argument: in Gulp Serve command
Error: Invalid glob argument: in Gulp Serve command

Sometimes, we may get the “Error: Invalid glob argument:

The above error comes due to the different gulp version installed in your machine – to fix the above error, you might need to run the below command:

npm install gulp@3.9.1 or npm install gulp@3.9.1 -g

or

You could just copy “node_modules” folder from other SPFx projects in your machine and replace the current “node_modules” folder – I did it and for me, it worked. 

Then, again run the gulp serve command 

gulp serve

Now, we can see the above error is gone and successfully gulp serve is being executed.

Gulp serve command execution successful status
Gulp serve command execution successful status

 

[wp_ad_camp_3]

Open the web part from the browser, local workbench:

Once we run the gulp serve command automatically the below page will be opened.

https://localhost:4321/temp/workbench.html

Add SPFx Web Part from local workbench.html
Add SPFx Web Part from local workbench.html

Click on the + icon

Then click on the “HelloWorld” which you just have created.

Below is the “HelloWorld” web part rendered in the browser. 

Preview of Hello World Web Part in the browser - https://localhost:4321/temp/workbench.html
Preview of Hello World Web Part in the browser – https://localhost:4321/temp/workbench.html

Now let’s open the above web part from the SharePoint page. Navigate to the below SharePoint page:

Syntax:
https://yoursposite/_layouts/15/workbench.aspx

Example:
https://globalsharepoint2020.sharepoint.com/sites/allcompany/_layouts/15/workbench.aspx

Then, we can see the below workbench.aspx page:

Add SPFx Web Part from SharePoint workbench.aspx

Add SPFx Web Part from SharePoint workbench.aspx

Click on the + icon, then in the web part search box type “hello”, you can see your HelloWorld web part and add it. The reason why you need to search your web part because there will be lots of other web parts that will lead you to confuse to find it. 

After adding  the web part into the SharePoint it will look like below:

Preview of Hello World Web Part in the browser - from SharePoint Workbench
Preview of Hello World Web Part in the browser – from SharePoint Workbench

Note:

  • While displaying the web part in the SharePoint page, we could see the background color of the web part is different – because it inherits the color of the site theme where it is being added, intentionally I have kept this theme different to show it differently. 

At this moment let the “gulp serve” continue to run if you stop it accidentally this will not work.

 

[wp_ad_camp_4]

 

Step: Open the SharePoint Framework (SPFx) project in the code editor:

We can use the below code editor in the SharePoint Framework (SPFx) project:

  • Visual Studio Code
  • Atom
  • Webstorm

Here, I will use the “Visual Studio Code” editor. 

Press on the control+c key to stop the gulp serve execution.

stop gulp serve execution
stop gulp serve execution

Type “Y” for Terminate batch job (Y/N)? 

stop gulp serve execution and open the code editor
stop gulp serve execution and open the code editor

Type “code .” (code single space dot)

code .

Once we type the code . – it will take us to the visual studio code editor tool.

Visual Studio Code Editor Tool - after typing "code ."
Visual Studio Code Editor Tool – after typing “code .”

In the next article, I will explain each file of this project. 

Summary:

Thus, in this article, we have learned the below concepts with respect to basic web part project in SharePoint Framework (SPFx):

  • How to create the First Hello World web part using the SPFx framework in Step by step procedure. 
  • How to create and deploy SharePoint Framework (SPFx).
  • How to deploy the SharePoint Framework (SPFx)  project in SharePoint workbench.
  • How to use the yeoman sharepoint generator.
  • How to fix the “Error: Invalid glob argument:”

See Also:

Free download SharePoint Online & Office 365 Administration eBook(238 Pages)

Get the PDF eBook from here:


[purchase_link id="0" style="button" color="blue" text="Free Download SharePoint Online & Office 365 Administration"]

 

 
FREE DOWNLOAD

Send download link to:

Subscribe to get exclusive content and recommendations every month. You can unsubscribe anytime.