Understanding solution structure in SharePoint framework (SPFx)

No comments

 4,689 total views,  6 views today

This is a part 2 of basic understanding of SharePoint framework (SPFx) web part development – the part 1 article is here – Develop your first hello world web part in sharepoint framework (SPFx). In this article, I will carry forward the tutorial from part 1 where I will explain, after creating the basic hello world web part project what are the files get created in the solution and how do the solution and folder structure look like.

Here I will mainly focus on the:

  • Understanding the solution structure in SharePoint Framework
  • Understanding the SPFx folder structure

Open node.JS command prompt and go to your project directory by typing the below:

cd "Your project directory" then type code .
stop gulp serve execution and open the code editor
stop gulp serve execution and open the code editor

Then the project file will be opened in the Visual Studio tool.

Visual Studio Code Editor Tool - after typing "code ."
Visual Studio Code Editor Tool – after typing “code .”

 

[wp_ad_camp_1]

Project files – Key files in the project are:

HelloWorldWebPart.ts 

This file is located at “src\webparts\helloworld” folder

SPFx Project Structure - HelloWorldsWebPart.ts
SPFx Project Structure – HelloWorldsWebPart.ts

This is the main entry point for the web part.

Whenever we create a new web part with the <web part name> – a class will be created that will extend the BaseClientSideWebPart – this is inheritance in the object-oriented languages such as Java and C# where developer used to inherit one class from another class,  similar way TypeScript classes can be extended to create new classes with inheritance, using the keyword extends.

 

export default class HelloWorldWebPart extends BaseClientSideWebPart <IHelloWorldWebPartProps> {

  public render(): void {

    this.domElement.innerHTML = `

      <div class="${ styles.helloWorld }">

    <div class="${ styles.container }">

      <div class="${ styles.row }">

        <div class="${ styles.column }">

          <span class="${ styles.title }">Welcome to SharePoint!</span>

  <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>

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

      <a href="https://aka.ms/spfx" class="${ styles.button }">

        <span class="${ styles.label }">Learn more</span>

          </a>

          </div>

          </div>

          </div>

          </div>`;

  }

 

[wp_ad_camp_2]

In the above class, we could see the HelloWorldWebPart  is being inherited from BaseClientSideWebPart class

To be a valid web part – any web part class must extend BaseClientSideWebPart class – The minimal functionality has been implemented in this class that requires to build a web part.

We also see HelloWorldWebPart class is defined to accept a property type “IHelloWorldWebPartProps” interface which has been defined before the class – using this interface we can add an additional property to the web part.

Using the below interface we can add the web part description attribute in the web part configuration panel at run time – similarly, we can add any types of attributes like checkbox, boolean, multiline, etc.  but those should be defined in this interface before we use.

export interface IHelloWorldWebPartProps
 {

  description: string;

}

At run time, in the web part configuration panel we could see the description field and whatever we type here that will be reflected in the main web part description (center).

SPFx Project Structure - HelloWorldsWebPart at run time
SPFx Project Structure – HelloWorldsWebPart at run time

Now, we will see the above web part text (below mentioned) – how this has been rendered.

Welcome to SharePoint!

Customize SharePoint experiences using Web Parts.

HelloWorld

Learn more

Lets, go to the HelloWorldWebPart  class – there we could see, there is a render() method which has implemented the functionality to render or display the above text in the browser.

export default class HelloWorldWebPart extends BaseClientSideWebPart <IHelloWorldWebPartProps> {

  public render(): void 
  {

    this.domElement.innerHTML = `

      <div class="${ styles.helloWorld }">

    <div class="${ styles.container }">

      <div class="${ styles.row }">

        <div class="${ styles.column }">

          <span class="${ styles.title }">Welcome to SharePoint!</span>

  <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>

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

      <a href="https://aka.ms/spfx" class="${ styles.button }">

        <span class="${ styles.label }">Learn more</span>

          </a>

          </div>

          </div>

          </div>

          </div>`;

  }

In the above code, we see this code “${escape(this.properties.description)” – this does the job of automatic rendering at run time while we do some changes in the description (field) box at the right side web part panel.

At the beginning HelloWorldWebPart class, we could see export default keywords have been added – what are these two? Look at the below example.

/**
* This is a "default" export. That means when you import this module you 
  can do so without needing a specific module name or brackets, e.g.

* import HelloWorldWebPart from './HelloWorldWebPart';
*
* instead of.....
*
* import { HelloWorldWebPart } from './HelloWorldWebPart';
*/
export default class HelloWorldWebPart extends BaseClientSideWebPart <IHelloWorldWebPartProps>
 {

}

So basically, in export, you are defining the policy on how the class can be imported – in other words, we can say export and import are tightly coupled.

At the beginning of the HelloWorldWebPart.ts file, we could see lots of Import statements have been added – so what is the use of Import keyword in typescript?

import { Version } from '@microsoft/sp-core-library';

import {

  IPropertyPaneConfiguration,

  PropertyPaneTextField

} from '@microsoft/sp-property-pane';

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import { escape } from '@microsoft/sp-lodash-subset';

import styles from './HelloWorldWebPart.module.scss';

import * as strings from 'HelloWorldWebPartStrings';

 

[wp_ad_camp_3]

In the above code, there are so many import statements – and few have {}, few have without bracket. First of let us understand what is the import statement? If we compare this with C#, it something like using keyword in the namespace, until we add it, we cannot reference the external class. Same thing here, until we import the class, we cannot use it in the current file.

For example, in the above code, we have used the BaseClientSideWebPart external class – so in order to invoke or use that class in the current file, we must import it like below:

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

Whether to use “{}” or without bracket in the import – it depends on how it has been exported – during export only it has been whether to use import with bracket “{}” or without bracket.

We should use import without bracket when it was exported as default on the other hand if it was not exported as default then we should use bracket “{}“. Lets, look at the below example:

import HelloWorldWebPart from HelloWorldWebPart;

is exactly equivalent to the import declaration

import { default as HelloWorldWebPart  } from HelloWorldWebPart;

Notes:

  • In a given file or class we just can have only one “default” export.
  • So, if we have more than one class to export from a single file, during export we should not use the keyword default and during import, we should keep all exported classes from that particular file inside the “{}”, let us have a look at the below example:
import {
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';

In the above example, there are two classes that have been imported using a single import.

 

HelloWorldWebPart.manifest.json file:

This is another important file that is located at  “src\webparts\helloworld” folder.

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

SPFx Project Structure - HelloWorldWebPart.manifest.json
SPFx Project Structure – HelloWorldWebPart.manifest.json

This is a pre-configuration entry file where we can set the default value, for example – in the above file at the “preconfiguredEntries” section, we can see the “description”: “HelloWorld” JSON entry, that is the reason while we run the gulp serve – we could see “HelloWorld” inside the “description” field at run time in the browser. 

HelloWorldWebPart.module.scss

This is a web part CSS file which is located at : “src\webparts\helloworld” folder.

HelloWorldWebPart.module.scss file in SPFx framework project
HelloWorldWebPart.module.scss file in SPFx framework project

 

[wp_ad_camp_4]

 

mystrings.d.ts

This is file is located at “src\webparts\helloworld\loc”. This is to display the web part property in a particular language – here in order to display this in English, we should have one more file i.e. “en-us.js“, below we can see this file.

mystrings.d.ts file in SPFx framework project
mystrings.d.ts file in SPFx framework project

en-us.js

This is file is located at “src\webparts\helloworld\loc” and this is an auto-created file. 

This file is responsible to display the web part property in multi-language i.e. localization. 

en-us.js file in SPFx framework project
en-us.js file in SPFx framework project

The above file is for the english language named “en-us.js“. If you want to add another language you have to create another file. For example, if you want to add the Norwegian language then you have to create “nb-NO.js” file.

Project configuration files (.json)

Below configurations are used for configuring the SPFx project – all files are in JSON format. 

Config.json

This configuration file contains the bundling information, the components used in the solution and the entry point of the solution. This file also maintains the external references example jquery.  Also, references to localization resources are stored in this file.

Config.json file in SPFx framework project
Config.json file in SPFx framework project
 

copy-assets.json

This configuration file is used to define the “deployCdnPath”.

copy-assets.json file SPFx framework project
copy-assets.json file SPFx framework project

deploy-azure-storage.json

This configuration file is used while we deploy the client-side web part (SPFx Framework web part) to Azure CDN. This file contains Azure storage account details.

deploy-azure-storage.json file SPFx framework project
deploy-azure-storage.json file SPFx framework project

package-solution.json

This file contains solution path configurations.

package-solution.json file SPFx framework project
package-solution.json file SPFx framework project

 

[wp_ad_camp_5]

serve.json:

This configuration file used to configure the initial workbench page, sometimes the workbench page does not open with the “https” then we can make the “https”: false and in the initialPage“: “http://localhost:5432/workbench”.

serve.json file SPFx framework project
serve.json file SPFx framework project

write-manifests.json

This configuration file is used to define the “PATH TO CDN”

write-manifests.json file in SPFx framework project
write-manifests.json file in SPFx framework project

 

Download

The above web part project code can be downloaded from here.

Summary

Hence, in this article we have learned below concepts with respect to folder and file structure in the SharePoint SPFx framework project:

  • Understanding the Solution Structure in SharePoint Framework
  • Understanding the below file structures: HelloWorldWebPart.ts,HelloWorldWebPart.manifest.json,mystrings.d.ts,en-us.js,Config.json,copy-assets.json,deploy-azure-storage.json,package-solution.json,serve.json,write-manifests.json
  • How to deploy SPFx web part to SharePoint online.
  • How does the SharePoint SPFx project structure look like?
  • How does the SPFx folder structure look like?

See Also

Free download SharePoint Online & Office 365 Administration eBook(238 Pages)

Get the PDF eBook from here:


[purchase_link id="0" style="button" color="blue" text="Free Download SharePoint Online & Office 365 Administration"]

 

 
FREE DOWNLOAD

Send download link to:

Subscribe to get exclusive content and recommendations every month. You can unsubscribe anytime.