What is folder structure of SharePoint Framework (spfx) webpart and what are the main files used in it.

Ans:- 

Folders in Solution

Below is the list of various folders and the information they contain.

src

• The code files are stored inside this folder
• Includes web part code file (HelloWorldWebPart.ts), configuration JSON file (HelloWorldWebPart.manifest.json)

lib

• It contains processed code which can be bundled and distributed
• All TypeScript files compiled to JavaScript files are stored in this folder

dist

• Contains final distributed files
• Includes JavaScript bundle file – HelloWorldWebPart.bundle.js

config

• Contains a set of JSON files for configuration
• Configuration files vary from bundling to packaging

node_modules

• Contains JavaScript modules downloaded by Node.js

typings

• Contains TypeScript typings files for various libraries
• Typings supports IntelliSense for JavaScript libraries

SharePoint

• Contains the final .spapp file post execution of ‘gulp package-solution’ command

Major Files in Solution

Web Part Class (HelloWorldWebPart.ts)

This defines the entry point of the web part. In our solution, we have only one web part class - HelloWorldWebPart.ts located at src\webparts\helloWorld folder. The web part class extends BaseClientSideWebPart. Each client-side web part should extend from BaseClientSideWebPart, which provides basic functioning for the web part.

Property Type Interface (IHelloWorldWebPartProps.ts)

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 the web part. We can add any of the below type of properties.

• Button
• Checkbox
• Choice group
• Dropdown
• Horizontal rule
• Label
• Link
• Slider
• Textbox
• Multi-line Textbox
• Toggle
• Custom

The properties can be used in web part as below.

1. <p class="${ styles.description }">${escape(this.properties.description)}</p>  

WebPart Manifest

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

Config.json

The configuration file contains the bundling information, the components used in the solution and entry point of the solution.

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

deploy-azure-storage.json

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

package-solution.json

This file contains solution path configurations.

gulpfile.js

Defines gulp tasks to run.

package.json

Defines JavaScript library dependencies.

tsconfig.json

Defines settings for TypeScript compilation

Summary

Yeoman generators help to generate SPFx client-side web part solution. The solution has a predefined structure. Each folder and file has its own significance. It is important to understand the role of each file for better development.