There are many libraries and built-in tools, which add convenient multi-packaged support for repository (Lerna, Rush, npm\pnpm\yarn workspaces and others). It's out of scope for this guide to cover all of them. Instead, it covers the most straightforward way of implementing the library components using just npm.

Using this option you just need to scaffold library components, webpart project and add spfx-fast-serve.

1. Scaffold two projects - library component inside spfx-library folder (I will use corporate-library as a library component name) and regular web part project into another folder spfx-webparts.

2. Both in spfx-webparts and spfx-library folders run

   spfx-fast-serve

3. Inside spfx-library run

   npx fast-serve config add

   And update created config with below serve settings:

   • port is any free TCP port except 4321, because it's the default for main SPFx web server. For example, you can use 4322, 4323, etc. The only rule is that you should use a unique port for every library component project per your SPFx solution
   • isLibraryComponent - true

4. In both folders run

   npm install

   to restore dependencies (if not did before).

5. Inside spfx-webparts add dependency on corporate-library by running below command:

   npm install ../spfx-library --save

   That's a special syntax, supported by npm, which installs dependency from parent folder name. It searches for package.json and adds corresponding dependency using symbolic links.

6. Run npm run serve inside spfx-library folder, wait till the full compilation, then npm run serve inside spfx-webparts. The order is important.