---
title: "Create a new component in a Sitecore-first JSS app running in connected mode"
slug: "create-a-new-component-in-a-sitecore-first-jss-app-running-in-connected-mode"
abstract: "Create and deploy a new component in a JSS app connected to Sitecore"
---
# Create a new component in a Sitecore-first JSS app running in connected mode

When developing Sitecore-first, if you are running the application in connected mode, you can deploy a component registration to your Sitecore instance.

> [!important]
> To create a component in the Sitecore-first development workflow in a JSS Next.js app refer to [Walkthrough: Create a new component in a JSS Next.js app using the Sitecore-first development workflow](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/walkthrough--create-a-new-component-in-a-jss-next-js-app-using-the-sitecore-first-development-workflow.html "Walkthrough: Create a new component in a JSS Next.js app using the Sitecore-first development workflow").
>
> The following steps apply to React, Angular, or Vue.js JSS applications.

To create a new component when the application is running in connected mode:

1. Determine the placeholder name that the component needs to live in. This placeholder name must be defined in a component's JavaScript code (root or another component) to determine where the component is injected in the HTML source code.
2. Use [the command `jss deploy component`](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/sitecore-javascript-rendering-sdk-cli-tools-api-reference.html#UUID-34b820e6-e957-c755-bc79-8b2ac6488ec9_UUID-55a165b5-479e-e61a-95ca-27b8a3c26690 "jss deploy component") to deploy the component's registration to the Sitecore database.

    ```text
    jss deploy component <ComponentName> --allowedPlaceholders=[placeholderName]
    ```

3. Create the component in the JSS app and register it in the Component Factory.
4. Deploy the app's build artifacts to Sitecore:

    ```text
    jss deploy files
    ```

5. Log in to Sitecore and open a route on the app with one of the [supported Sitecore editors](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/sitecore-editors-and-content-management.html "Sitecore editors and content management"). Then, add your new component to its allowed placeholder from the UI.