Development workflow
When developing a JSS app, the JSS app consumes data from Sitecore but has no responsibility for defining the structure of that data or what components are registered with XM Cloud. Therefore, all developers working on the app require their own development instance of XM Cloud, and the JSS app connects to it to acquire its content and layout data.
This topic explains basic development concepts of JSS in XM Cloud.
Creating renderings
When creating rendering items, use the Json Rendering template instead of View renderings, XSLT, and so on. This rendering template is automatically rendered to JSON when emitted by the Layout Service. The Json Rendering template includes additional fields that allow you to set Rendering Contents Resolvers, set up Integrated GraphQL queries, and configure placeholders.
Also unique to the Json Rendering template, the Component Name field is a string that needs to match with the name of a component registered in the JSS app. For example, if you created a rendering with Foo as the component name, the JSS app would need a Foo.js component that was registered with its component mapping as "Foo" > Foo.js. If a component name cannot be mapped, JSS apps show a placeholder with the name of the missing component received from Sitecore. This can be used to scaffold out a component hierarchy prior to front-end developers actually implementing the view of the components.
When adding a placeholder to a rendering, the placeholder must also be added to the Layout Service Placeholders field on the rendering item. Otherwise, Layout Service does not attempt to render the child placeholder, and you do not receive any renderings added to it in the Layout Service data.