Sharepoint Modern Framework

2019-05-21 : BY CLICK2CLOUD-BLOG
Sharepoint Modern Framework

 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.

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:

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:


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.

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:



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!

Because 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.

Recent Posts

Get In Touch With

Our Offices

location Plot No. 21, Premier Technology Group, Third Floor, I.T Park Road, Parsodi, Nagpur - 440022(MS)

phone0712-297 0257 / 0712-297 1228 / +91-766 690 5354

location2549, 152nd NE Avenue, NE, Redmond, WA - 98052

phone+1 425 748 9666

location No.401, Unit 8, Building 8, Area 5, HeYiDongLi, Fengtai District, Beijing, China, 100076

phone+86 173 4656 0417

location2806 Bloor Street West, Toronto, ON M5S 0B1

phone+1 425 748 9666

locationOffice No. 121-122Cowork06, Building Number 67 - Regus Doha Dring Building, Street 250 - DRing Road, Zone 45 - Old Airport,PO Box 32522, Doha, Qatar

phone+974 4423 1210

location7 Temasek Boulevard, #12-07, Suntec Tower One, Singapore 038987

locationNo 5, 17/f, strand 50 50 bonham strand, Sheung wan, Hong Kong