SPFx 1.9 is released with lot of new features check out release notes here… one new feature generally available is Library component.

What is library component? When to use it ?

When building web parts if we like to be able to extract common code to a separate library that can be shared amongst the different web parts.

Library component provides option to create shared code, which can be then used and referenced across all the components in the tenant.

Building Library component using SPFx 1.9

This feature available from SPFx 1.8 beta and generally available from SPFx 1.9

  • Setup your development enviroment refer here
  • If you are already using SPFx 1.8, then install SPFx 1.9.0
npm install -g @microsoft/generator-sharepoint
  • Create a new project directory in your projects folder location
md custom-Library
  • Go to the project directory
cd custom-Library
  • Create a new library by running the Yeoman SharePoint Generator (this is same as how you create new webpart)
yo @microsoft/sharepoint
  • When prompted: follow the steps below image
  • Select Library as the client-side component type to be created.
  • The next set of prompts ask for specific information about your library:

Library Solution Sucessfully created
Type code .. to open the project using visual studio code
  • Once the project is scaffolded, you will see the library created with an index.ts file containing an export from the  CustomLibraryLibrary created.
  • To add your method or classes, go to
src\libraries\CustomLibrary\CustomLibraryLibrary.ts
  • You will notice the default methos name()
export default class CustomLibraryLibrary {
  public name(): string {
    return 'CustomLibraryLibrary';
  }
}
  • You can change the functionality as per your use case, here I am return the current time for sample,
    replace name method as follows:
public getCurrentTime(): string {
    return 'The current time as returned from the custom library is ' + new Date().toTimeString();
}
  • Run gulp on the command prompt to see everything builds fine
  • Now you are ready to use the Libray to your SPFx webParts.

How to consume a SPFx library for local testing

  • Run npm link from the root directory of library solution. In this case it would be from the custom-Library folder.
  • This will create a local npm link to the library with the name which is provided in the package.json

Create a SPFx Webpart

  • Create a web part project in a separate project folder, so not in the library project folder structure, if you are new to SPFx webpart, then following the instructions from here. Name your web part ‘CustomLibraryWebPart
  • To refer the library to your project, From the root of the new web part folder, run the command npm link library-solution
  • This will create a symbolic link to that locally built library in to the web part and will make it available to your web part. refer below screenshot
  • Open the web part solution using visual studio editor and navigate to src\webparts\customLibraryWebPart\CustomLibraryWebPartWebPart.ts
  • Add an import to refer to your custom library
import * as myLibrary from 'library-solution';
  • Change the default render method and call the custom library method ‘getCurrentTime()
  • Create a instance const myInstance = new myLibrary.CustomLibraryLibrary();
  • Call the method myInstance.getCurrentTime()
public render(): void {
    const myInstance = new myLibrary.CustomLibraryLibrary();
    this.domElement.innerHTML = `
      <div class="${ styles.customLibraryWebPart }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to Libray component type!</span>
              <p>${myInstance.getCurrentTime()}</p>

            </div>
          </div>
        </div>
      </div>`;
  }
  • Test your webpart
gulp serve
  • Test your webpart by launching the local workbench and add the webpart to the page

Deploy a SPFx library component to tenant app catalog

  • This is an same steps as spfx webpart deployment
  • Navigate to the custom-library root folder and bundle and package the library solution
gulp bundle --ship
gulp package-solution --ship
  • This will build any local changes made and package the solution into an sppkg file which is located in the sharepoint\solution folder
  • Deploy this package in the tenant app catalog and make it tenant wide deployed by checking the Make this solution available to all sites in the organization option
  • Now we deployed the Library solution

Deploy webpart and consume library component from webpart

  • Navigate to the web part solution folder. CustomLibraryWebPart
  • Open the package.json file in the root of that folder, i.e.. CustomLibraryWebPart folder
  • Add an entry to reflect the library entry and its version to the dependencies section (you can find this in the package.json file of the library solution your created earlier) as follows:
"dependencies": {
        "library-solution": "0.0.1",
        "@microsoft/sp-core-library": "1.9.0",
        "@microsoft/sp-webpart-base": "1.9.0",
        "@microsoft/sp-lodash-subset": "1.9.0",
        "@microsoft/sp-office-ui-fabric-core": "1.9.0",
        "@types/webpack-env": "1.13.1",
        "@types/es6-promise": "0.0.33"
    },
  • Build the webpart to deploy
gulp bundle --ship
gulp package-solution --ship
  • Deploy the web part solution to the tenant app catalog.
  • Add the newly added web part to a page and notice that the library is automatically made available to the web part the web part functions.
  • Making any changes to the library, and publishing the library to the app catalog again will automatically update the web part without the need to rebuild/republish the web part.

Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *