Configure the editing host for local XM Cloud

After setting up my local environment, when I tried to open item in experience editor, it gave me below error:

Unable to connect to the remove server

In order to resolve this, we need to connect to rendering host using items because the solution is based on Sitecore Experience Accelerator (SXA)

App Name:

Make sure that name of the app in settings item under your site and app name(config.appName) mentioned in src/<app-folder>/package.json file of the front-end app are same.

Predefined application rendering host:

Check if the Predefined application rendering host field has the value ‘default’ in /content/<SiteName>/<AppName>/Settings/Site Grouping/<your-site> item

Application name:

Verify that the application name is correct in /System/Settings/Services/Rendering Hosts/Default.

If not, change it to match the config.appName setting in the package.json file of your rendering app.

If the field is left blank, then the field uses, by default, the value you configured in step 1(App Name).

Local Configuration:

Create an rendering host item under /System/Settings/Services/Rendering Hosts/ and add values.

In the Server side rendering engine endpoint URL field, enter the URL to the front-end app’s API route for rendering in editing mode.( check docker-compose.override.yml file in the root of your project)

In the Server side rendering engine application URL field, enter the value of the RENDERING_HOST_INTERNAL_URI environment variable.(check docker-compose.override.yml file in the root of your project)

In the Application name field, enter the name of your front-end application as configured in the package.json file.

Select local predefined application rendering host

In the /content/<sitename>/<appname>/Settings/Site Grouping/<appname> item, in the Settings section, the Predefined application rendering host field, select the Local rendering host definition and save the item

Run front-end app in connected mode:

Go to your rendering host directory (say sxastarter) and start the front-end application in connected mode with the command:

npm run start:connected

Now, Open any item in experience editor