Scaffolding components in JSS apps

Current version: 22.0

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.

Tip

If you use the Sitecore-first workflow, remove the functionality for creating files in the folder sitecore/definitions because they are unnecessary.

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:

    RequestResponse
    
    jss 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:

    RequestResponse
    
    jss 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.

Do you have some feedback for us?

If you have suggestions for improving this article,