This investigation of Sitecore JSS and SXA was done quite a while ago, but I didn’t get a chance to post it here. I need to go back to the validation of this setup so this will be a living post and I’ll be updating as new findings arrive.

You might ask why would you need to mix them, but the reason is pretty simple. SXA brings a lot of functionality outside of presentation configuration (which I’m not a fan of) that can be useful for any site, like site management, wizards for site creation, local data sources, various site settings, etc.

Initial research (Sitecore 9.0.0 + JSS TP3 + SXA 1.5.x)

It is possible to run SXA and JSS side by side, which is a good starting point.

Worked:

  • Data sources work and use queries like:

  • query:$site/[@@name=‘Data’]/[@@templatename=‘Accordion Folder’]

  • query:$sharedSites/[@@name=‘Data’]/[@@templatename=‘Accordion Folder’]

  • Shared sites for data sources work fine

Didn’t work:

  • SXA toolbox does not work in JSS

  • Partial and Page design do not work in JSS by default

  • Page variants don’t work

  • Themes could not be used

  • Styles are applied using e.g.

  • @Html.Sxa().Component(“carousel”, Model.Attributes)

  • Design export doesn’t work nor make sense anymore

  • The control editing event works strangely when the page design is specified

It turns out that a lot of SXA customization could not be used, site creation requires too much clean-up after creation even with all options unchecked. It was possible to use many data templates available in SXA.

To be continued…

Follow me on Twitter @true_shoorik. Would be glad to discuss the ideas above in the comments.