Understanding solutions structure in SharePoint framework (SPFx)

Instantly understanding solutions structure in SharePoint framework (SPFx) – Office 365

One comment

Loading

Solutions structure in SharePoint framework – This is 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 the files get created in the solution and how do the solution and folder structure looks like. Here I will mainly focus on the:

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

Understanding solutions structure in SharePoint Framework (Understanding SPFx)

Open the 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 .”

SPFx project structure: 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>`;

  }

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;

}

Understanding solution structure in SharePoint Framework (Understanding SPFx) demo

At run time, in the web part configuration panel we could see the description field, and whatever we type here 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

Let’s, go to the HelloWorldWebPart  class – there we could see, there is a render() method that 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 the 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';

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 is something like using a 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 “{}“. Let’s, 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 in “src\webparts\helloworld” folder. WebPart Manifest HelloWorldWebPart.manifest.json holds the metadata of web parts such as display name, description, icon, version, and 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 in: “src\webparts\helloworld” folder.

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

mystrings.d.ts This 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 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.

SPFx project structure – Project configuration files (.json)

The 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

serve.json: This configuration file is 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: Understanding solutions structure in SharePoint Framework (Understanding SPFx solution structure)

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

Summary: Understanding solutions structure in SharePoint Framework (Understanding SPFx solution structure)

Hence, in this article we have learned the 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: SharePoint Online tutorial (solutions structure in SPFx framework)

You may also like the below SharePoint Online tutorials:

Download SharePoint Online PDF Book

Download SharePoint Online & Office 365 Administration eBook

Buy the premium version of SharePoint Online & Office 365 administration eBook from here:



Buy SharePoint Online & Office 365 Administration eBook


 

Get the free demo PDF eBook from here:

FREE DOWNLOAD

Send download link to:

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

About Post Author

1 comments on “Instantly understanding solutions structure in SharePoint framework (SPFx) – Office 365”

Do you have a better solution or question on this topic? Please leave a comment