How would you best configure JSS to work with multiple Sitecore <sites>?

Question

One of the key benefits I can see from moving to JSS is the way developers can work with the different tools. In particular the lure of Hot Module Replacement (HMR) adds such a lot of positives for development speed. Therefore its key we don't lose this capability - building the whole JSS project for every change would not be a good solution.

We have a traditional Sitecore setup which relies heavily on <sites>. Examples being configured as follows:

• www.domain.com <= en-ca
• www.domain.com/fr <= fr-ca
• www.anotherdomain.com <= en-au
• www.anotherdomain.com/fr and www.anotherdomain.com/fr-fr shouldn't work

In the non-jss world we are achieving the /fr url chunk via config in <sites> for the french site of: virtualFolder="/fr" physicalFolder="/fr"

When running in headless mode I believe this could be achieved with the configuration of express however how could this be done when doing connected, 'HMR driven development' (jss start:connected) as this by default always runs localhost:3000

Answer 1

When running in connected mode, there is an Express server that runs next to your JSS app (by default at localhost:3000). However, your app is making requests to your Sitecore instance via whatever URL you've defined in the layoutServiceHost property in scjssconfig.json.

That means you can modify the layoutServiceHost property to use whatever site hostName is appropriate for the <site /> nodes you have defined in your Sitecore instance.

If you need to modify the layoutServiceHost value at runtime, for instance to reflect some URL fragment or parameter, then you can do so wherever you make a call to dataApi.fetchRouteData (or "globally" in your app wherever you resolve routes). The JSS sample apps make that call in the RouteHandler component (in React and Vue), and you'll see in the getRouteData method of that component that it sets the layoutServiceConfig.host property to the config.sitecoreApiHost value. That value, by default, comes from scjssconfig.json, but as mentioned it can come from anywhere or be modified prior to usage.