Scaffolding components in JSS apps

Abstract

Create new components in JSS sample apps using the scaffolding script

Creating new components is one of the most common tasks performed 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 at a location 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 are using the Sitecore-first workflow, remove functionality for creating files in the folder sitecore/definitions because they are not needed.

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 for your component.

To create a component:

  • In a terminal, in the root directory of the JSS application, run the following script:

    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:

    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.