Sitecore JSS rendering host failed

Question

I am getting below error after creating the JSS App in connected mode.

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

error in the Sitecore log file
Error occurred during POST to remote rendering host: `http://localhost:3000/api/editing/render`
8672 15:15:07 ERROR The remote server returned an error: (401) Unauthorized.
Exception: System.Net.WebException
Message: The remote server returned an error: (401) Unauthorized.
Source: System
   at System.Net.WebClient.UploadDataInternal(Uri address, String method, Byte[] data, WebRequest& request)
   at System.Net.WebClient.UploadString(Uri address, String method, String data)
   at Sitecore.JavaScriptServices.ViewEngine.Http.RenderEngine.Invoke[T](String moduleName, String functionName, Object[] functionArgs)

Answer 1

This is mostly due to the missing editing secret value. Check your config file: sitecore/config/{YourAppName}.config:

<!--
    JSS EDITING SECRET
    To secure the Experience Editor endpoint exposed by your Next.js app (see `serverSideRenderingEngineEndpointUrl` below),
    a secret token is used. This is taken from an env variable by default, but could be patched and set directly by uncommenting.
    This (server-side) value must match your client-side value, which is configured by the JSS_EDITING_SECRET env variable (see the Next.js .env file).
    We recommend an alphanumeric value of at least 16 characters.

    <setting name="JavaScriptServices.ViewEngine.Http.JssEditingSecret" value="" />
  -->

You would be add it to your environment variables (.env - JSS_EDITING_SECRET).

I hope it helps you