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:
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.
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:
copy-assets:
This file contains path of “temp\deploy” folder location in solution.
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.
package-solution.json:
This file contains solution path configurations. Along with name,app id and version.
Web Part Class (HelloWorldWebPart.ts):
This describes the entry point of the client side web part. The web part class extends BaseClientSideWebPart.
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.
I hope this will help to understand the role of each file for better development.
Kirti Prajapati 
One comment