Solution structure in SharePoint Framework (SPFx)

You can open the solution in the code editor like visual studio code.

Go to command prompt, Navigate to the code directory, and type code. and press enter. Your source code will be open up in Visual code.

The Solution structure consist of various folder and configuration files at the root. The primary language used is TypeScript. The code mostly uses classes, modules, and interfaces written in typescript.

Folders in the Solution

Src

Code files are stored inside this folder

Lib

It contains processed code which can be bundled and distributed

All typescript files compiled into JavaScript files are stored here

Dist

Contains final distributed files

Includes javascript bundle file

Config

Contains set of JSON file for configuration

Node_modules

Contains JavaScript modules downloaded by node.js

Typings

Contains typescript typing files for various libraries

Typing support intellisense for JavaScript Library

SharePoint

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

Files in Solution

Let’s assume the WebPart Name is HelloWorld

WebPart Class (HelloWorldWebPart.ts)

This defines the entry point of the webpart.

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.

WebPart Menifest (HelloWorldWebPart.menifest.json)

This file holds the metadata of webpart such as display name, description, icon, version etc.

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 id, name and version number.

Serve.json

File where we can see on what url and port workbench will be served.

Write-menifest.js

File where we can mention where manifest file can be found.

Gulpfile.js

Defines gulp tasks to run.

Package.json

Defines JavaScript library dependencies.

Tsconfig.json

Defines settings for TypeScript compilation