Steps to follow:
1. Create a new project directory in your favorite location.
2. Go to the project directory.
3. Create a new HelloWorld web part by running the Yeoman SharePoint Generator.
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.
When the scaffold process is finished, Yeoman will show the following message indicating a successful scaffold.
4. Open Solution in Visual Studio 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.
The following diagram shows the installation of the developer certification:
b. Run the following command to preview Webpart in local SharePoint workbench
(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:
- Compiles SASS to CSS
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: