---
title: "Scaffolding components in JSS apps"
slug: "scaffolding-components-in-jss-apps"
abstract: "Create new components in JSS sample apps using the scaffolding script"
---
# 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.

> [!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](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/jss-angular-schematics.html "JSS Angular Schematics") 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:

    ```shell
    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:

    ```shell
    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`.