HelloWorld SPFx Solution


The Yeoman generator for SPFx helps to scaffold the initial project structure. To build client-side web part, we can choose any of the JavaScript library or framework such as “No JavaScript Framework”, “React” and “Knockout”. Build SPFx webpart using Gulp & test it on the SharePoint Workbench.

Client-Side Web Parts are developed using modern UI standards, JavaScript libraries and style scripts.

Steps to follow:

1. Create a new project directory in your favorite location.

md helloworld-webpart

2. Go to the project directory.

cd helloworld-webpart

3. Create a new HelloWorld web part by running the Yeoman SharePoint Generator.

yo @microsoft/sharepoint

a. When prompted:

  • Accept the default helloworld-webpart as your solution name, and then select Enter.
  • Select SharePoint Online only (latest) and select Enter.
  • Select Use the current folder for where to place the files.
  • Select N to allow the solution to be deployed to all sites immediately.
  • Select N on the question if solution contains unique permissions.
  • Select Webpart as the client-side component type to be created.

b. The next set of prompts ask for specific information about your web part:

  • Accept the default HelloWorld as your web part name, and then select Enter.
  • Accept the default HelloWorld description as your web part description, and then select Enter.
  • Accept the default No JavaScript web framework as the framework you would like to use, and then select Enter.

When the scaffold process is finished, Yeoman will show the following message indicating a successful scaffold.

4. Open Solution in Visual Studio Code

code .

5. Run the Web part on SharePoint local workbench

a. As client-side tool-chain uses the HTTPS endpoint, initially we should install developer certificate on the development environment.

gulp trust-dev-cert

The following diagram shows the installation of the developer certification:

b. Run the following command to preview Webpart in local SharePoint workbench

gulp serve

(This command instructs gulp to start the node.js server and open the browser with a local SharePoint Workbench – https://localhost:4321)

*   This gulp server command runs a series of the following tasks:

  • Minifies and bundles JavaScript and CSS files
  • Compiles SASS to CSS
  • Compiles TypeScript to JavaScript

6. The SharePoint Local Workbench is an HTML page which helps to preview and test client-side web parts without deploying to SharePoint. It gets served locally at https://localhost:4321/temp/workbench.html

7. Click on the Add (+) icon and select the WebPart.

8. Click on the Edit icon to modify web part property from the properties pane.

Code – Solution Structure

SPFx solution structure consists different files and folders. It includes as below:

Code – Solution structure

You may also like

Leave a Reply

Your email address will not be published.