Setting a custom components (componentRootPath) path for Sitecore JSS 21.5.3
As part of upgrading Sitecore JSS in our project, it was necessary to maintain the existing pattern where we have a custom path for JSS components. Having a custom path for the JSS components allows us to use the default react components path as intended (for react components). In earlier versions of JSS (21.0.9 at least), the path was set in the scripts/componentFactory.ts
as componentRootPath
, but in newer versions, much of this code has been moved into JSS itself. However, with a little bit of work, we are able to inject the value as before. Here’s how it’s done in JSS 21.5.3.
In scripts/generate-component-builder/index.ts
, we need to add the componentRootPath
property to the ComponentBuilderPluginConfig
interface:
scripts/generate-component-builder/index.ts
JSS already knows about this property, but doesn’t expose it here by default.
The other file that we need to update is component-builder.ts
, where we can set the property value before JSS gets to work bootstrapping.
scripts\generate-component-builder\plugins\component-builder.ts
Now, when we run yarn bootstrap
or yarn build
(or npm or any of the others), the JSS components will be registered from the correct custom path.
I also need to thank Frank van Zutphen for his post on customising the file pattern for the components folder which helped me to understand what was going on.
I hope this has been helpful. Thanks for reading. :-)