3

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

Improve this question

2 Answers 2

Reset to default
2

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.

Improve this answer
3
  • 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
    Commented Jul 10, 2018 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
    Commented Jul 10, 2018 at 20:45
  • Hi Kam, how we need to implement the step "Implement the React component and register it with the JSS app". I created a JSON rendering(HelloWorld) in sitecore and scaffold the same name in jss app jss scaffold HelloWorld. While adding to the experiance editor I get an error as "JSS component is missing React Implementation".
    – PVM
    Commented Mar 27, 2020 at 16:45
1

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]
Improve this answer
1
  • 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
    Commented Jul 10, 2018 at 15:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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