Create a new component in a Sitecore-first JSS app running in connected mode

Version: 21.x

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.

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 to deploy the component's registration to the Sitecore database.

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

    RequestResponse
    jss deploy files
  5. Log in to Sitecore and open a route on the app with one of the supported Sitecore editors. Then, add your new component to its allowed placeholder from the UI.

Do you have some feedback for us?

If you have suggestions for improving this article,