I understand the mecanism when you create component code-first and then you import it into Sitecore. I try to understand one point, how can I import new component from Sitecore (Sitecore-first ?) to the JSS React application ?

For example : In Sitecore I created a template named "Article". I also created a new item named "My article". Then I want to display it in my React JSS application.

What steps I need to achieve in both Sitecore and application side to make if work ? If it's explained in a documentation please share a link because I can't find that information.

Thanks

up vote 1 down vote accepted

In most cases, I would suggest using the JSS CLI to scaffold Sitecore-first components. Run jss deploy component --help to see the options.

Manual process to create a "Sitecore-first" JSS component:

  • Create a new datasource template to store the component's data fields. This template can be anywhere under /sitecore/templates (optional if the component has no data fields, but most will)
  • Create a new Json Rendering item under /layout/renderings/[anywhere] to register the component with Sitecore
    • Under Component Name enter the name of the component that will be returned by Layout Service. This is the name of your frontend component, for example in the React sample it is the Map key in the componentFactory.js file.
    • Set the Datasource Template to your template, if using a datasource template
    • Set the Datasource Location to where you'd like to store the datasource item instances (i.e. /sitecore/content/MySite/Component Content/Stuff or ./Page Components)
  • Add the rendering to a route item's layout using Experience Editor
  • Implement the React component and register it with the JSS app

Note: When using connected mode, there is no need to define the component schema in disconnected mode (i.e. to use anything in /data or /sitecore/definitions). Sitecore owns that data in connected mode.

  • Thanks for your answer, I was able to create my component through JSS CLI and view it in SiteCore. Could you just clarify what means "add the component to a route with Experience Editor" (or share a documentation link) ? – JohnB Jul 10 at 20:03
  • Adding the component isn't really JSS-specific; something along the lines of this: sitecore.stockpick.nl/english/the-experience-editor (create route or edit existing, insert your component - if it doesn't show up as an option, may need placeholder settings assigned) – Kam Figy Jul 10 at 20:45

I'm assuming you're operating in Connected Mode. If so, review documentation here:

https://jss.sitecore.net/#/layout-service?id=the-sitecore-layout-service

A sample request is structured like this:

/sitecore/api/layout/render/[config]?item=[path]&sc_lang=[language]&sc_apikey=[key]&tracking=[true|false]
  • Hi Jon, so if I understand well, I just need to create an "Article" definition in my React appplication that match the fields of my Sitecore Article template ? And then request throught Layout API ? – JohnB Jul 10 at 15:37

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.