Sitecore JSS react SSR - how to setup higher environment(UAT/PROD) rendering host for experience editor

Question

All our resources are in azure! Our Sitecore instance, front end codes are hosted as app-services!

We are trying to setup rendering host for experience editor. We are looking for ideal way for SSR headless option and not integrated mode.

Developer machine setup:

Below is our developer machine setup & its completely working fine, Following this official docs

• CMS local Sitecore instance: Below is jss app config,

        <app name="exp-demo"
         layoutServiceConfiguration="default"
         sitecorePath="/sitecore/content/exp-demo"
         useLanguageSpecificLayout="true"
         graphQLEndpoint="/sitecore/api/graph/edge"
         inherits="defaults"
         serverSideRenderingEngine="http"
         serverSideRenderingEngineEndpointUrl="http://localhost:5000/api/editing/render"
         serverSideRenderingEngineApplicationUrl="http://localhost:5000"
         />
  

• Rendering host: In local code tunnelling to the localhost:5000

  • In package.json we have "tunnelUrl": "http://localhost:5000",
  • Also we will build & run rendering host using this cmd npm run build:rendering-host & npm run start:rendering-host. We are using ngrok tunnel url, only for front end resources testing.
  • Experience editor is working as expected!

Higher environment setup : (This is the area we are not able to up and running!)

Below options tried,

option1 : Pointing FrontEnd(SSR proxy) as serverSideRenderingEngineEndpointUrl.

1. We have a headeless SSR proxy(URL:https://exp-demo-fe) followed by this article. This is our UAT website frontend endpoint with SSR.

• CMS UAT Sitecore instance : Below is jss app config,

      <app name="exp-demo"
       layoutServiceConfiguration="default"
       sitecorePath="/sitecore/content/exp-demo"
       useLanguageSpecificLayout="true"
       graphQLEndpoint="/sitecore/api/graph/edge"
       inherits="defaults"
       serverSideRenderingEngine="http"
       serverSideRenderingEngineEndpointUrl="https://exp-demo-fe/api/editing/render"
       serverSideRenderingEngineApplicationUrl="https://exp-demo-fe"
       />
  

• This is failed with below error , when we try to open experience editor.

Error Rendering Sitecore.JavaScriptServices.ViewEngine.Presentation.JsLayoutRenderer: Unexpected character encountered while parsing value: <. Path '', line 0, position 0. at Newtonsoft.Json.JsonTextReader.ParseValue()

Note we already set JSSEDITING secret in both client & server side. In CM No further logs!

2. Even we try to change the serverSideRenderingEngineEndpointUrl as like below,

serverSideRenderingEngineEndpointUrl="https://exp-demo-fe/jss-render" |serverSideRenderingEngineEndpointUrl="https://exp-demo-fe|serverSideRenderingEngineEndpointUrl="https://exp-demo-fe/sitecore/api/editing/render"

but this is giving the below error,

Connection to your rendering host failed with a Not Found error. Ensure the POST endpoint at URL http://***/api/editing/render has been enabled.

Question 1 : This option 1 is right way to do? As a SSR proxy can act as a rendering host for CMS Experience editor? Then what we missed here ?

Question 2 : How to setup rendering host as per this article in APPSERVICE? When we try this , its no make sense to expose to ngrok first of all because we have public url already. Also when we try this we couldn't able to start rendering host server! Node js throwing below error

node:events:491
      throw er; // Unhandled 'error' event
      ^

Error: spawn C:\home\site\wwwroot\node_modules\ngrok\bin\ngrok.exe ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:283:19)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:289:12)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn C:\\home\\site\\wwwroot\\node_modules\\ngrok\\bin\\ngrok.exe',
  path: 'C:\\home\\site\\wwwroot\\node_modules\\ngrok\\bin\\ngrok.exe',
  spawnargs: [ 'authtoken', '***************************************' ]
}

Answer 1

You are using below things,to concurrence.

• React as your front end
• SSR headless proxy NODEJS - to server your website in SSR mode

Looking for experience editor support with http rendering!

Question 1

---

Question 1 : This option 1 is right way to do? As a SSR proxy can act as a rendering host for CMS Experience editor? Then what we missed here ?

Answer for Question1:

SSR headless proxy meant to serve the FrontEnd website in ServerSideRenderingMode.

It's not meant to act as an editing rendering host.

So you can't use it as an editing rendering host.

Question 2

---

Question 2 : How to setup rendering host as per this article in APPSERVICE? When we try this , its no make sense to expose to ngrok first of all because we have public url already. Also when we try this we couldn't able to start rendering host server! Node js throwing below error

Answer for Question2:

Mentioned this article is very clear for local development.

Now coming for higher environments like UAT/PROD. Yes we dont need ngrok to expose URL.

Then what we need to do is, Remove the tunnelling part from your code.Then you will not get this error related ngrok.

// startRenderHostTunnel('{ngrokurl.when.running.from.local}', { port: 443 })
//   .then((tunnelUrl) => {
    // const buildArtifactsPath = path.resolve(__dirname, '../build');
    startRenderingHostServer({
      hostname:"",
      port: 8080,
      appInvocationInfoResolver: getDefaultAppInvocationInfoResolver({
        appPathResolver: (requestJson) => {
          return path.resolve('./build/server.bundle');
        },
      }),
      hooks: {
        beforeServerStarted: (server) => {
          server.use(
            '/static',
            express.static(path.resolve(__dirname, '../build/static'), {
              fallthrough: false, // force 404 for unknown assets under /dist
            })
          );
        },
      },
    });
  // })
  // .catch((err) => {
  //   console.error(err);
  // });

General steps to achieve http rendering for experience editor for react/angular/vue projects

Pre-requisite checks

• Make sure your FE code is running with out any build error.

Build package

Please make sure below changes in your source code.

1. In package.json , change the "tunnelUrl":"https://your-renderinghost-url"

2. Go to \scripts\http-renderer.js and comment out the tunnelling code for ngrok. This is not required in higher environement.

   // startRenderHostTunnel('{ngrokurl.when.running.from.local}', { port: 443 })
   //   .then((tunnelUrl) => {
   

   • Go to \scripts\http-renderer.js and change the folder path /build-rendering-host/ to /build/

3. Create build package using the command.

   > npm run build:rendering-host

4. Your final build package should contain below things,

   • build folder (copy your build-rendering-host content to here)
   • node_modules
   • scripts folder
   • package.json

5. deploy this build package in dedicated environement. Example Azure app service OS:linux RunTime:Node-18-lts

CMS configuration

Make sure below configuration is proper,

<javaScriptServices>
      <apps>
        <app 
         {...OtherConfigs}
           serverSideRenderingEngine="http"
           <!--Avoid giving the /api/editing/render  this is specific to next.js , not for react/angular/vue based-->
           serverSideRenderingEngineEndpointUrl="https://your-renderinghost-url" 
        />
      </apps>
</javaScriptServices>

Now test your experience editor, If you face any issue check your CMS log & Rendering host log for more detials.

To enable rendering host logs use this environement variable REACT_APP_DEBUG=sitecore-jss:*.

Answer 2

If you want to configure your Sitecore instance and JSS app to set up higher environments (UAT/PROD) for Sitecore JSS React SSR with a rendering host that works with the Experience Editor, follow these step-by-step instructions:

1. Configure Rendering Host in Sitecore:

   In the Sitecore instance for your UAT/PROD environment, you need to configure a rendering host. This can be done using the "Site Manager" in the Sitecore Desktop:

   • Open the "Sitecore Desktop" in your UAT/PROD environment.
   • Navigate to "Sites" and find your JSS site.
   • Edit the site settings and set the "Host Name" to match your UAT/PROD domain (e.g., uat.yoursite.com or www.yoursite.com).

2. Update JSS App Configuration:

   In your JSS app's configuration, you'll need to make changes to match the rendering host you've configured in Sitecore:

   • Locate the scjssconfig.json file in your JSS app's root directory.
   • Find the "deployUrl" property under the "sitecore" section.
   • Set the value of "deployUrl" to the URL of your UAT/PROD Sitecore instance, including the rendering host (e.g., "https://uat.yoursite.com").

3. Update Experience Editor Redirects:

   The Experience Editor uses redirects to navigate between the Sitecore instance and your JSS app for editing. You'll need to configure these redirects to use the correct rendering host:

   • In your JSS app's sitecore/definitions folder, find the RouteDefinition.item.json file.
   • Update the sitecoreRoute definition to set the hostName property to match your UAT/PROD domain.

   Example:

   {
     "name": "RouteDefinition",
     "fields": {
       "sitecoreRoute": {
         "fields": {
           "placeholders": [
             {
               "name": "jss-main",
               "placeholders": []
             }
           ],
           "match": "route",
           "name": "Home",
           "path": "/",
           "controller": "JssNextWeb.Feature.Home",
           "action": "Index",
           "contentType": "Home",
           "databaseName": "master",
           "requireLogin": false,
           "disableViewIndexing": false,
           "hostName": "uat.yoursite.com" // Update this
         }
       }
     }
   }
   

4. Deploy and Test:

   After making these configuration changes, deploy your JSS app to your UAT/PROD environment. Test the Experience Editor by accessing it through the UAT/PROD domain. It should now correctly redirect to and interact with your JSS app running on the higher environment.

Remember to adjust the settings according to your specific setup and requirements. Always thoroughly test these changes in your UAT environment before deploying them to production to ensure a smooth Experience Editor integration.

Hope this might help you. Please let me know if you still have issues.