Build your first client side web part with SharePoint Framework

Getting started with SharePoint Framework SPFx

 

After Setting up our development environment, Office 365 Tenant and creating our developer site collection and app catalog.

Now it’s time to build your first client side web part with SharePoint Framework and preview it locally (Workbench) and on SharePoint Online, then i will explain you the structure of our web part project generated by Yeoman ShrePoint generator.

Let’s get started !

      1. Create a new web part Project

  1. Create new project directory
  2. Go to the project directory
  3. Create a new client side web part by running the Yeoman SharePoint Generator

Executing yo @microsoft/sharepoint will display the prompt which we will have to fill up so as to proceed with project creation :

  1. The name of the solution, i set it to “sp-learning-hello-world“, but you can select the default name “helloworld-webpart” by clicking on Enter.
  2. I Select “SharePoint 2016 onwards, including SharePoint Online” in order to be able to deploy the package in the both environments, but you can select just “SharePoint Online” if you target it only.
  3. Select “Use the current folder” for where to place the files.
  4. Accept the default “HelloWorld” as your web part name, and then select Enter.
  5. Accept the default “HelloWorld description” as your web part description, and then select Enter.
  6. I select “React” as a framework that i would like to use, but you can select “knockout” or “No javascript web framework” then click on Enter.

At this point, Yeoman installs the required dependencies and scaffolds the solution files along with the HelloWorld web part. This might take a few minutes.

When the scaffold is complete, you should see the following message indicating a successful scaffold.

 

   2. Preview the web part

        2.1 Install the developer certificate and preview your web part

So to preview our web part, build and run it on a local web server. You need to know that the client-side toolchain uses HTTPS endpoint by default. However, because a default certificate is not configured for the local dev environment, your browser reports a certificate error.

The SPFx toolchain comes with a developer certificate that you can install for building web parts using the following command :

gulp trust-dev-cert

After we have installed the developer certificate, enter the following command in the console to build and preview your web part:

gulp serve

This command executes a series of gulp tasks to create a local, node-based HTTPS server on localhost:4321 and launches your default browser to preview web parts from your local dev environment.

        2.2 SharePoint Workbench

SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. SharePoint Workbench includes the client-side page and the client-side canvas in which you can add, delete, and test your web parts in development.

  1. To add the HelloWorld web part, select the add icon. This opens the toolbox where you can see a list of web parts available for you to add. The list includes the HelloWorld web part as well other web parts available locally in your development environment.

     2. Select HelloWorld to add the web part to the page.

       Congratulations! You have just added your first client-side web part to a client-side page.

3. Select the pencil icon on the far left of the web part to reveal the web part property pane.

The property pane is where you can define properties to customize your web part. The property pane is client-side driven and provides a consistent design across SharePoint.

4. Modify the text in the Description text box to Client-side web parts are awesome!

   Notice how the text in the web part also changes as you type.

         2.3 SharePoint Online

So now let’s try to preview the client side web part on SharePoint Online. We need to keep gulp serve command running because SharePoint Workbench is also hosted in SharePoint Online but this time the key advantage is that now you are running in SharePoint context and you are able to interact with SharePoint data.

  1. Go to the following URL:

https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx

    2. Select the add icon in the canvas to reveal the toolbox. The toolbox now shows the web parts available on the  site where the SharePoint Workbench is hosted along with your HelloWorldWebPart.

 

3. Add HelloWorld from the toolbox. Now you’re running your web part in a page hosted in SharePoint!

         2.4 SharePoint Workbench VS SharePoint Online
         SharePoint Workbench
         SharePoint Online

     3. Web part project structure

 

  • .vscode: includes Visual Studio Code integration files
  • config: includes all config files
  • dist: created automatically when you build the project – holds debug builds
  • lib: created automatically when you build the project
  • node_modules: this is created automatically when you build your project, it includes all the npm packages your solution relies upon and their dependencies
  • src: this is the main folder of the project, it includes the web part, styles, and a test file
  • temp: created automatically when you build your project – holds production builds
  • typings: includes some type definition files. Most type definitions are installed in node_modules\@types

 

Next Post :

I will show you how to deploy and preview the Hello World web part in a SharePoint page.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *