1

One of my projects is using Sitecore 9.1.1 & JSS, also Server-Side Rendering (SSR) Mode is running successfully on Azure App Service. Ex. www.example.com - which is an English language website is running successfully.

I have a requirement to run multiples JSS websites on the same Azure App Service (where the English website is running) like the following.

www.example.in,
www.example.uk,
www.example.de,

app.example.com --- all websites are sharing the front-end components. To optimize the cost client wants to deploy and run all the websites in the same app service. I have a requirement to run 30 such language websites.

I have this challenge while running in headless mode, with integrated mode above requirement works without any issue.

  • Is creating 30 app services a solution option? it looks deployment and maintenance are going to be a challenge.

Tried multiple options, but finding difficult to implement the above requirement in the App Service. If anyone has experience or suggestions to implementing above said requirement, please share your inputs, thoughts. Also, suggest if any other approach to be considered for such requirements.

Thanks in advance.

Improve this question

3 Answers 3

Reset to default
1

This works in Integrated Mode because in this case Sitecore is fully responsible for handling the incoming request and can easily resolve a site based on the hostname out-of-the-box. With headless mode situation is slightly different because a proxy is receiving the request first.

One way to achieve what you want would be be to update your frontend App to append the sc_site query string parameter to the Sitecore Layout Service calls. There is a nice blog post on how to do that: https://sitecore.decerno.se/post/jss-site-resolver

Alternatively, you can bind multiple hostNames your Sitecore AppService instance and make sure your frontend app is using the appropriate hostName when calling the Layout Service API. In this case Sitecore will be able to resolve proper site context based on hostname. Downside of this approach is that you will need to bind multiple hostnames to your AppService instance.

Improve this answer
1

There are two ways to run multi sites in headless mode.

  1. Running one headless rendering host You will need to resolve any site routing in the headless rendering host. You can take a look at the rewriteRequestPath function in https://github.com/Sitecore/jss/blob/dev/packages/sitecore-jss-proxy/src/index.ts#L288

  2. Running each site in its own individual Azure Web App as headless rendering host The Headless proxy has a configuration parameter qsParams https://github.com/Sitecore/jss/blob/dev/packages/sitecore-jss-proxy/src/ProxyConfig.ts#L13 Just hardcore the sc_site parameter (eg. sc_site=example-uk) to each config.js file, and then deploy your JSS code. There are ways to deploy to 30 Azure Web Apps in parallel using ARM templates. To save costs, you may also run all 30 Azure Web App under the same App Hosting Plan.

Improve this answer
1
  • As an alternative approach, looking at the VM based or docker based approach.
    – Sivalingaamorthy
    Commented Aug 17, 2020 at 12:28
1

I would suggest not to modify your UI source code for this implementation but you can simply implement it from the node js proxy.

Define config.js for each site.

Use node vhost package to select appropriate config based on hostname.

Improve this answer

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.