Scaffolding components in JSS apps
Creating new components is one of the most common tasks while developing JSS applications.
To facilitate the creation of new components, JSS Next.js, React, and Vue.js sample applications provide a scaffolding script defined in the file scripts/scaffold-component.[ts|js]. You invoke the script with the jss scaffold command. The script creates the component file relative to the folder src/components and the manifest definition file in the folder sitecore/definitions/components. If you don’t like the project structure generated by the scaffolding script, you can customize it.
You can create components with the scaffolding utility by providing a relative filesystem path or a component name.
Create components by name
You can create components with the scaffolding script, providing only the name of your component.
To create a component:
-
In a terminal, in the root directory of the JSS application, run the following script:
RequestResponsejss scaffold ComponentName
The script generates the src/components/ComponentName.tsx component file and a manifest definition sitecore/definitions/components/ComponentName.sitecore.ts.
Create components by path
If you want to group your components in sub-directories of the folder src/components, you can create components with the scaffolding script providing the directory path and name for the component.
To create a component at a specific path:
-
In a terminal, in the root directory of the JSS application, run the following script:
RequestResponsejss scaffold some/new/path/ComponentName
The script generates the src/components/some/new/path/ComponentName.tsx component file and a manifest definition file sitecore/definitions/components/some/new/path/ComponentName.sitecore.ts.