SharePoint Development with SharePoint Framework – Part III

In part two we explored the environment setup for building SPFx solutions. In this blog part, we will be building our first Hello World webpart.

Building your first SPFx Solution

Step 1

Create an empty directory in the location of your choosing. You can achieve this using Windows PowerShell command md helloworld-webpart

Change your path to the newly created directory using cd helloworld-webpart

Step 2

Create a new HelloWorld Web part using the yeoman generator by issuing

yo @microsoft/SharePoint command.

This command will initialize webpart creation, and you will be prompted with a series of questions that will help in webpart configuration.

• 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 the solution contains unique permissions.
• Select Webpart as the client-side component type to be created.
• Accept the default HelloWorld description as your web part description, and then select Enter.
• Select No JavaScript Web Framework, but if you want to use React or KnockoutJS, use arrows in your keyboard to select either and press Enter.

Step 3

Use gulp trust-dev cert command to create a secure localhost connection. This command is only run once when setting up your SPFx development environment.

Step 4

At this point, you are ready to start building your webparts. Use gulp serve command to preview your application in your local environment. This command executes a series of gulp tasks to create a local, node-based HTTPS server that makes to preview possible. The command should open https://localhost:4321/temp/workbench.html and load the following section.

Click on the + symbol to expand for details, here, select your webpart name.

Congratulations you have built your first Sharepoint webpart using SPFx!

SharePoint Workbench

You can preview and test your webpart directly with much effort from the SharePoint Online. This method depends on the server that was started using the gulp serve command. It automatically fetches your solution from the local environment.

The SharePoint workbench URL is https://yoursiteurl/layouts/workbench.aspx

To add the HelloWorld webpart, click on the + icon. It will open a modal that will help you add webpart solutions. You can search for the HelloWorld webpart solution and click on the webpart.

Once you have clicked, it will expand, and your solution will cover a region of your page.

Next, we will be building Teams app using SPFx.