Scaffolding components in JSS apps

Current version: 19.x

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.

Tip

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:

    RequestResponse
    jss scaffold ComponentName

Depending on the framework, the script will generate the following files:

  • A Single File Component for Vue.js: src/components/ComponentName.vue and a manifest definition file sitecore/definitions/components/ComponentName.sitecore.js.

  • A JavaScript file for React: src/components/ComponentName/index.js and a manifest definition file sitecore/definitions/components/ComponentName.sitecore.js.

  • A TypeScript file for Next.js: src/components/ComponentName.tsx and a manifest definition file 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:

    RequestResponse
    jss scaffold some/new/path/ComponentName

Depending on the framework, the script will generate the following files:

  • A Single File Component for Vue.js: src/components/some/new/path/ComponentName.vue and a manifest definition file sitecore/definitions/components/some/new/path/ComponentName.sitecore.js.

  • A JavaScript file for React: src/components/some/new/path/ComponentName/index.js and a manifest definition file sitecore/definitions/components/some/new/path/ComponentName.sitecore.js.

  • A TypeScript file for Next.js: src/components/some/new/path/ComponentName.tsx and a manifest definition file sitecore/definitions/components/some/new/path/ComponentName.sitecore.ts.

Do you have some feedback for us?

If you have suggestions for improving this article,