Our First Client-Side Web Part (Hello World) Part 1

• Create project folder in your machine by passing command "md <Your-Project-Name>"

Create Project Solution Directory

• Open project folder by passing command "cd <Your-Project-Name>" 

Get into Project Solution Directory

• Provide solution name for creating client web part using SPFX.

Provide Solution Name

• Select which type of baseline package do you want to target for your components.

Select baseline packages want to target components

• Select the folder you want to place the files.

Select Solution folder to place your files.

• Select whether you want to allow the tenant admin to select for deploying the solution to all sites immediately without running any feature deployment or adding apps in sites. 

Select Solution folder to place your files.

• Select which type of client-side component to create? (Currently WebPart).

Select type of component to create

• Provide WebPart Name and Description.

Provide web part name and description

• Select which type of framework you want to create webpart.(Currently No JavaScript framework)

Creating desired web part

• Our desired webpart created successfully.

web part created successfully

• For the first time on your development machine run command by passing "gulp trust-dev-cert" to install Developer certificate. 

Certificate trust

• Accept the certificate by selecting option Yes. 

Accept certificate

• We have installed the developer certificate.

Trust build success

• Now enter the following command "gulp serve" to build and preview your web part.

gulp serve

• Build started.

Using gulp file starting gulp

• Build success and it redirects to browser with localhost.

gulp started and redirects to browser with localhost

• Here is the localhost web page preview, here we can search our web parts. 

localhost web page

• Preview of our first client-side web part.

web part preview

Continuation ... Part 2 (Deploy your web part to SharePoint)