Nested Components Scaffolding

Question

I'm currently setting up a new JSS project using the JSS React boilerplate and I ran into an issue regarding the scaffolding of components. When using the scaffolding script I can use jss scaffold Foo to scaffold a Foo component in the src/components folder as well as the needed sitecore files.

I'm trying to achieve scaffolding nested components in the src/components folder a React.js front-end SPA. With the current way of scaffolding, I'm not able to do this. Placing the scaffolded component in a subfolder in src/components/Bar/Foo won't work. Even when I keep the same folder structure in sitecore/definitions/components. I suspect this is due to some paths being used while scaffolding in seperate files.

Is there a way to have nested components in src/components to build a structured project?

Answer 1

Assuming you used one of the sample apps to bootstrap your app, the scaffolding script is located in scripts/scaffold-component.js and is fully customizable to suit your needs and patterns. In this same file you can customize the manifest definition scaffolding as well.

You'll likely also want to change the component factory generation script scripts/generate-component-factory.js as well (if you're using it) to match the nested structure of your components.

Answer 2

You can use below snippet to creates the nested component inside the plugins folder component.ts file:

const { componentName, componentPath } = config;
const filename = `${componentName}.tsx`;
const componentRoot = componentPath.startsWith('src/') ? '' : 'src/components/' + componentName;

Which creates the component inside the component folder followed by your component name

e.g. npm run scaffold Divider then destination is:

/src/components/Divider/Divider.ts