SharePoint Framework Project structure

Please read previous posts if you want to know about Create a Client Side Web Part using SPFx

In previous posts I have explained SPFx CSWB can be developed using different tools and using NPM modules and its dependencies can be installed. Yeoman generator brings out the scaffolding of the project and builds the required project structure in code editors of our choice. You can find more details on use of tools from here.

In this post I will explain how the solution structure of SPFx client side web part look alike and explain major elements of it.

Project Solution Structure:

In the previous post, I have explained how to create first SPFx client side web part.  I am going to use the same web part solution for this post.

From Node.JS command prompt, run below command to open the solution in code editor of your choice (I am using VS Code).

code .

This will open up the project solution with default files/folders as below:

1_Pro

As mentioned, the project solution structure entails several folders and configuration files. Each folder and file has its own significance. The code mostly uses classes, modules and interfaces written in TypeScript. TypeScript (a superset of JavaScript) is the primary language used in SPFx

Components of the Project Solution Structure:

Config.json (configuration file):
Config.json file resides in “Config” folder of the solution. This file contains an information of bundling, components used in the solution and entry point of the solution.

2_Pro

Along with this, this file also records the external references (for e.g. jQuery), its dependencies and references to localization resources are stored in this file.

The file looks like below:

3_Pro

copy-assets:

This file contains path of “temp\deploy” folder location in solution.

4_Pro

deploy-azure-storage.json:

This file contains details for Azure storage account and is used while deploying the client-side web part to Azure CDN.

5_Pro

package-solution.json:
This file contains solution path configurations. Along with name,app id and version.

6_Pro

Web Part Class (HelloWorldWebPart.ts):
This describes the entry point of the client side web part. The web part class extends BaseClientSideWebPart.

7_Pro.png

Each client side web part should extend from BaseClientSideWebPart, which provides basic functioning for web part.
Property Type Interface (IHelloWorldWebPartProps)
The interface resides in the same web part file. The web part class accepts the property type of interface. This interface is used to define our own custom properties for web part. We can add following types of property.

·         Button ·         Checkbox ·         Choice group
·         Dropdown ·         Horizontal Rule ·         Label
·         Link ·         Slider ·         Textbox
·         Multiline Textbox ·         Toggle ·         Custom

WebPart Manifest:
HelloWorldWebPart.manifest.json holds the metadata of web part such as display name, description, icon, version, id.

8_Pro

I hope this will help to understand the role of each file for better development.

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s