SharePoint Framework fast serve now supports library components

A few months ago I created a tool, which speeds up a regular “gulp serve” process. In a nutshell, it uses a separate webpack based build. Please read this post to learn more. Since the initial release, I’ve fixed a few good things and added new features. The most awaited is library components support. Read further to find out how to use spfx-fast-serve with library components. 

Table of Contents

• Without a multi-package manager. 
  • How to configure
• Using Lerna.js
  • How to configure
• Bonus

You can manage library components in two different ways: with a special multi-package manager (Lerna.js) or without. Lerna is not the only multi-package manager, there is also Rush.js, however I know Lerna, I wrote a blog post on how to use Lerna with library components before, Lerna is simple and has least issues when working with SharePoint Framework.  

Without a multi-package manager. 

My approach is different from the official one in a way it links library component and SPFx web part project. The official docs suggest using npm link command, which, in general, works quite well, however, it introduces a few other issues. For example, every time you add a new dependency or just run npm install, you have to run npm link once again. You should always keep that in mind, that your symbolic link might be destroyed during various npm commands. 

Instead of using npm link, you can install dependency using npm built-in mechanism with npm install. npm install accepts a local path to dependency as a second argument. 

For example, by running below command:

npm install ../spfx-library --save

you will add a dependency to your current project on spfx-library, which is one level up in folders structure. Under the hood, npm creates a symbolic link to your spfx-library, but the biggest difference is that this link is not destroyed every time you run npm install. npm manages and resolves everything internally so you shouldn’t even think about it. Just install and forget. 

How to configure

1. In the beginning, you should scaffold two projects - spfx-library and spfx-webparts (using corresponding folders with the same name). “corporate-library” will be the library components package name (don’t confuse with a folder name, package name that’s a name from package.json project file).

2. Then you should add spfx-fast-serve to both projects. So inside spfx-webparts run

spfx-fast-serve

3. Inside spfx-library run

spfx-fast-serve --library-component

Now you see the difference - for library component project you should use —library-component switch. That’s it!

4. Restore dependencies in both folders by running npm install.

5. Finally, you should a new dependency to the spfx-webparts project. Use the approach described above:

npm install ../spfx-library --save

This command will add “corporate-library” as a dependency to your spfx-webparts project. 

6. Run npm run serve inside spfx-library folder, then npm run serve inside spfx-webparts. THE ORDER IS IMPORTANT.

Now you can develop web parts with fast serve and library components support!

Using Lerna.js

As said, Lerna simplifies multi-packaged repository management and has a number of benefits when using together with SharePoint Framework library components. As a prerequisite, you should have lerna.js installed globally. 

How to configure

1. Firstly, you should scaffold both library component and webpart project. However this time, Lerna manages dependencies, that’s why you should use yo @microsoft/sharepoint —skip-install option. 

The next two steps are very identical to the “Without a multi-package manager” approach.

2. So inside spfx-webparts run

spfx-fast-serve

3. Inside spfx-library run

spfx-fast-serve --library-component

4. Now you should explicitly add a dependency to the spfx-webparts project. You don’t need npm for that purpose, because as mentioned before, Lerna manages dependencies on its own. Thus simply update spfx-webparts/package.json and add a dependency on “corporate-library”: “0.0.1”

5. In the parent folder for both spfx-library and spfx-webparts run

lerna init

This command inits Lerna in the directory. It adds a lerna.json file, which contains essential configuration for your projects and Lerna. 

6. Update just created lerna.json with below configuration:

{
    "packages": [
         "spfx-library/**",
         "spfx-webparts/**"
     ],
    "version": "0.0.0"
}

Using this minimal configuration we tell Lerna to use our two folders and search packages there. 

7. Then finally run

lerna bootstrap

This command will restore dependency in all packages.

8. Run

lerna run --parallel serve

It will start the serve process in both folders. Now we achieved the same result as in our first approach without Lerna.

Bonus

If you’re aware of sp-rest-proxy - SharePoint REST API Proxy for local Front-end development created by awesome MVP Andrew Koltyakov, then I have you covered. 

Just by running 

spfx-fast-serve --rest-proxy

you will efficiently add sp-rest-proxy right inside the fast-serve so that your npm run serve command serves proxy as well!

Title image credits - Business vector created by freepik - www.freepik.com