Sharepoint Modern Framework

s10

SPFx webpart project structure:

SPFx webpart can be developed using TypeScript.

What is TypeScript?

TypeScript is the primary language for building SharePoint client-side webparts. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. SharePoint client-side development tools are built using TypeScript classes, modules, and interfaces to help developers build robust client-side webparts.

Please find below screenshot for webpart folder structure.

s3

Build the webpart on a local web server:

The client-side webpart uses HTTPS endpoint by default. Once you done with your coding for webpart, switch to your console, ensure that you are still in the <<webpart>> directory.

Enter the following command to install the developer certificate only once while Building the solution:

gulp trust-dev-cert

Enter the following command in the console to build and preview the webpart. The following 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 webparts from your local dev environment. Visual Studio Code provides built-in support for gulp and other task runners. Select Ctrl+Shift+B on Windows or Cmd+Shift+B on Mac to debug and preview your webpart.

gulp serve

Please find below screenshot for more details:

s4

Preview and test the webpart:

There are following two ways to preview and test the webpart

In SharePoint Workbench (local web server)

SharePoint Workbench is a developer design surface that enables you to quickly preview and test webparts 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 webparts in development.

Please find below screenshot for more details:

s5

To add the webpart, select the add icon (this icon appears when you mouse hovers over a section as shown in the previous image). This opens the toolbox where you can see a list of webparts available for you to add. The list includes the all webparts available locally in your development environment.

s6

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

In SharePoint site:

SharePoint Workbench is also hosted in SharePoint to preview and test your local webparts in development. The key advantage is that now you are running in SharePoint context and you can interact with SharePoint data.

1. Go to the following URL:

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

 

2. Notice that the SharePoint Workbench now has the Office 365 Suite navigation bar.

3. Select the add icon in the canvas to reveal the toolbox. The toolbox now shows the webparts available on the site where the SharePoint Workbench is hosted along with webpart, Now run your webpart in a page hosted in SharePoint!

s8Because you are still developing and testing your webpart, there is no need to package and deploy your webpart to SharePoint.

So, in next blog, you will be learning how to deploy the package on SharePoint Modern site and how to use webpart in page.

 

Leave a Reply