SharePoint Framework - Understanding The Solution Structure

Overview

SharePoint Framework (SPFx) client-side web parts are lightweight in nature. They can be developed using open-source tools, such as Node.JS, NPM, and Yeoman generators, and can be opened in code editors of our choice (Visual Studio Code, Atom, Webstorm). Node Package Manager (NPM) helps to install modules and their dependencies. The Yeoman generator carries out the scaffolding and builds the required project structure.

In this article, we will have a close look at the solution structure of SPFx client-side web part and understand the major elements of it.

Previous Articles

Please go through the below-related articles on the same topic.

1. Overview Of SharePoint Framework (SPFx)
2. SharePoint Framework - Develop First Client-Side Web Part

Solution Structure

In the previous article, we developed our first SPFx client-side web part.

In the command prompt, run the below command to open the solution in the code editor of your choice.

code

The solution structure consists of various folders and a few configuration files at the root. The primary language used is TypeScript (which is a superset of JavaScript). The code mostly uses classes, modules, and interfaces written in TypeScript.

Folders in Solution

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

1. src
   • The code files are stored inside this folder
   • Includes web part code file (HelloWorldWebPart.ts), configuration JSON file (HelloWorldWebPart.manifest.json)
2. lib
   • It contains processed code that can be bundled and distributed
   • All TypeScript files compiled to JavaScript files are stored in this folder
3. dist
   • Contains final distributed files
   • Includes JavaScript bundle file – HelloWorldWebPart.bundle.js
4. config
   • Contains a set of JSON files for configuration
   • Configuration files vary from bundling to packaging
5. node_modules
   • Contains JavaScript modules downloaded by Node.js
6. typings
   • Contains TypeScript typing files for various libraries
   • Typings supports IntelliSense for JavaScript libraries
7. SharePoint
   • Contains the final .spapp file post execution of the ‘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 in the 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 types of properties.

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

The properties can be used in the web part as below.

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

• WebPart Manifest: HelloWorldWebPart.manifest.json holds the metadata of the web parts such as display name, description, icon, version, and ID.
  
• Config.json: The configuration file contains the bundling information, the components used in the solution, and the entry point of the solution.
• This file also records the external references (e.g. jQuery) and their 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 solutions. 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.