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 CLI command jss scaffold. 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.
If you use the Sitecore-first workflow, remove the functionality for creating files in the folder sitecore/definitions because they are unnecessary.
For scaffolding Angular components, JSS installs the JSS Angular Schematics package during app creation.
You can create components with the scaffolding utility using a relative 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:
Depending on the framework, the script will generate the following files:
- A Single File Component for Vue.js:
src/components/ComponentName.vueand a manifest definition filesitecore/definitions/components/ComponentName.sitecore.js. - A JavaScript file for React:
src/components/ComponentName/index.jsand a manifest definition filesitecore/definitions/components/ComponentName.sitecore.js. - A TypeScript file for Next.js:
src/components/ComponentName.tsxand a manifest definition filesitecore/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:
Depending on the framework, the script will generate the following files:
- A Single File Component for Vue.js:
src/components/some/new/path/ComponentName.vueand a manifest definition filesitecore/definitions/components/some/new/path/ComponentName.sitecore.js. - A JavaScript file for React:
src/components/some/new/path/ComponentName/index.jsand a manifest definition filesitecore/definitions/components/some/new/path/ComponentName.sitecore.js. - A TypeScript file for Next.js:
src/components/some/new/path/ComponentName.tsxand a manifest definition filesitecore/definitions/components/some/new/path/ComponentName.sitecore.ts.