Experience Editor / preview mode throws error when viewing branch template items

Question

I'm working on a SC 10.2 JSS site. On previous MVC projects I was always able to enter Experience Editor / Preview mode while building branch templates for pages. That is, the items such as /sitecore/templates/Branches/Project/Main/MyPage/$name .

However, I always run into this error:

30960 09:48:43 ERROR Application error.
Exception: System.Web.HttpUnhandledException
Message: An unhandled exception occurred.
Source: Sitecore.Mvc
   at Sitecore.Mvc.Pipelines.MvcEvents.Exception.ShowAspNetErrorMessage.ShowErrorMessage(ExceptionContext exceptionContext, ExceptionArgs args)
   at Sitecore.Mvc.Pipelines.MvcEvents.Exception.ShowAspNetErrorMessage.Process(ExceptionArgs args)
   at (Object , Object )
   at Sitecore.Pipelines.CorePipeline.Run(PipelineArgs args)
   at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain, Boolean failIfNotExists)
   at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain)
   at Sitecore.Mvc.Pipelines.PipelineService.RunPipeline[TArgs](String pipelineName, TArgs args)
   at Sitecore.Mvc.Filters.PipelineBasedRequestFilter.OnException(ExceptionContext exceptionContext)
   at System.Web.Mvc.ControllerActionInvoker.InvokeExceptionFilters(ControllerContext controllerContext, IList`1 filters, Exception exception)
   at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass3_1.<BeginInvokeAction>b__5(IAsyncResult asyncResult)
   at System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeAction(IAsyncResult asyncResult)
   at System.Web.Mvc.Controller.<>c.<BeginExecuteCore>b__152_1(IAsyncResult asyncResult, ExecuteCoreState innerState)
   at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult)
   at System.Web.Mvc.Controller.EndExecuteCore(IAsyncResult asyncResult)
   at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult)
   at System.Web.Mvc.Controller.EndExecute(IAsyncResult asyncResult)
   at System.Web.Mvc.MvcHandler.<>c.<BeginProcessRequest>b__20_1(IAsyncResult asyncResult, ProcessRequestState innerState)
   at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult)
   at System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult)
   at Sitecore.Mvc.Routing.RouteHttpHandler.EndProcessRequest(IAsyncResult result)
   at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
   at System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step)
   at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

Nested Exception

Exception: Sitecore.JavaScriptServices.ViewEngine.RenderingEngine.ApplicationNotFoundException
Message: A Sitecore.JavaScriptServices application was not found for the path /sitecore/templates/Branches/Project/Main/MyPage/$name. You should ensure that:
* You have applied a Sitecore configuration patch for the application (see App_Config\Sitecore\JavaScriptServices\Sitecore.JavaScriptServices.ExampleApp.config.example)
* The path represents a Route
* The Route item is a descendant of an App item
Source: Sitecore.JavaScriptServices.ViewEngine
   at Sitecore.JavaScriptServices.ViewEngine.Presentation.Pipelines.MvcGetRenderer.GetJsLayoutRenderer.ResolveAppConfiguration(Item contextItem)
   at Sitecore.JavaScriptServices.ViewEngine.Presentation.Pipelines.MvcGetRenderer.GetJsLayoutRenderer.GetRenderer(GetRendererArgs args)
   at Sitecore.JavaScriptServices.ViewEngine.Presentation.Pipelines.MvcGetRenderer.GetJssRenderer.Process(GetRendererArgs args)
   at (Object , Object )
   at Sitecore.Pipelines.CorePipeline.Run(PipelineArgs args)
   at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain, Boolean failIfNotExists)
   at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain)
   at Sitecore.Mvc.Pipelines.PipelineService.RunPipeline[TArgs](String pipelineName, TArgs args)
   at Sitecore.Mvc.Pipelines.PipelineService.RunPipeline[TArgs,TResult](String pipelineName, TArgs args, Func`2 resultGetter)
   at Sitecore.Mvc.Presentation.Rendering.GetRenderer()
   at Sitecore.Mvc.Presentation.Rendering.get_Renderer()
   at Sitecore.Mvc.Presentation.Rendering.ToString()
   at Sitecore.Mvc.Pipelines.Response.RenderRendering.InitializeProfiling.StartProfiling(RenderRenderingArgs args)
   at Sitecore.Mvc.Pipelines.Response.RenderRendering.InitializeProfiling.Process(RenderRenderingArgs args)
   at (Object , Object )
   at Sitecore.Pipelines.CorePipeline.Run(PipelineArgs args)
   at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain, Boolean failIfNotExists)
   at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain)
   at Sitecore.Mvc.Pipelines.PipelineService.RunPipeline[TArgs](String pipelineName, TArgs args)
   at Sitecore.Mvc.Presentation.RenderingView.Render(ViewContext viewContext, TextWriter writer)
   at System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context)
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult)
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult)
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult)
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult)
   at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass3_1.<BeginInvokeAction>b__5(IAsyncResult asyncResult)

Aside from this error, I am not finding any helpful information in the JSS/Sitecore logs. When I run in debug mode, I don't see any exceptions getting thrown in my custom code. That makes sense because the error is happening at a much higher level. Everything else is working as expected and I can enter preview/edit mode on regular content items.

Looking at what the error suggests:

• The item in question does inherit from the Route template.
• The URL for the preview/edit view contains sc_site=main; that is https://mysite.sc/?sc_mode=edit&sc_itemid=%7bxxxxxxxxx%7d&sc_version=1&sc_lang=en&sc_site=main
• My config is defined as follows:

<app name="main" 
    sitecorePath="/sitecore/content/Sites/Main" 
    graphQLEndpoint="/api/main" 
    serverSideRenderingEngine="http" 
    serverSideRenderingEngineEditOnly="false" 
    serverSideRenderingEngineEndpointUrl="http://localhost:3000/api/editing/render" 
    serverSideRenderingEngineApplicationUrl="http://localhost:3000" 
    useLanguageSpecificLayout="true" 
    defaultWorkflow=""
    protectDeveloperItems="false"
    deploymentSecret=""
    inherits="defaults"
    dictionaryDomain="{6336E54C-9D3D-462B-A6F3-CF58C6B16AED}" 
    patch:source="Sites.config"
/>

It makes sense that an application was not found for the branch template item when it does not exist under sitecorePath="/sitecore/content/Sites/Main", but it isn't clear how I can make this work.

The only other posts that cite this error are below:

• https://www.linkedin.com/pulse/jss-layout-services-troubleshooting-arvind-gehlot
• https://hishaamn.wordpress.com/2021/06/18/sitecore-jss-sxa-application-not-found/

One of these mentioned this:

The Root start item (in your site config patch file) should be a descendant of an App item

Clearly, branch templates are not a descendant of an App item, but could we somehow make them be a descendant of an App item? Or is there another way to get this working?

Answer 1

Join me down the rabbit hole.

Don't actually follow the steps below. Scroll to the bottom for the recommended solution.

Step 1: Change the Template of a Common Branch Template Parent Item

My branches for page items live under a common parent: /sitecore/templates/Branches/Project/Main

I changed the template of that item from /sitecore/templates/System/Branches/Branch Folder to /sitecore/templates/Foundation/JavaScript Services/App

Optional steps would be to change the icon back to a folder and to copy the insert options from Branch Folder.

Step 2: Add a New App to Your Site Configuration

The app name is not material, as long as it is unique. I chose to call it branchtemplateeditor.

All this does is register your new App item with JSS.

<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/">
  <sitecore>
    <javaScriptServices>
      <apps>
        <app name="branchtemplateeditor" 
            sitecorePath="/sitecore/templates/Branches/Project/Main" 
            graphQLEndpoint="/api/main" 
            serverSideRenderingEngine="http" 
            serverSideRenderingEngineEditOnly="false" 
            serverSideRenderingEngineEndpointUrl="http://localhost:3000/api/editing/render" 
            serverSideRenderingEngineApplicationUrl="http://localhost:3000" 
            useLanguageSpecificLayout="true" 
            defaultWorkflow="" 
            protectDeveloperItems="false" 
            deploymentSecret="" 
            inherits="defaults" 
            dictionaryDomain="{6336E54C-9D3D-462B-A6F3-CF58C6B16AED}"
        />
      </apps>
    </javaScriptServices>
  </sitecore>
</configuration>

Making this change should recycle your app pool, which is important because there does appear to be caching in play here.

Step 3: Run It

After configuring the workaround, the branch page can be viewed. The URL also pre-populates with the correct sc_site value (in this case main) without any manual action:

https://mysite.sc/?sc_mode=edit&sc_itemid=%7b3xxxxxxxxx%7d&sc_version=1&sc_lang=en&sc_site=main

Conclusion and BEST Solution

The fact that this issue can be remediated by simply creating an App as a parent of the branch template and registering the App in the config appears to indicate that the logic which determines if a ApplicationNotFoundException should be thrown may be rudimentary.

Sure enough, Sitecore.JavaScriptServices.ViewEngine.Presentation.Pipelines.MvcGetRenderer.ResolveAppConfiguration appears to confirm my hunch:

protected virtual AppConfiguration ResolveAppConfiguration(Item contextItem)
{
    AppConfiguration appConfiguration = this.AppConfigResolver.ResolveForItem(contextItem);
    if (appConfiguration != null)
    {
        return appConfiguration;
    }
    if (!contextItem.Name.Equals("__Standard values", StringComparison.OrdinalIgnoreCase))
    {
        throw new ApplicationNotFoundException(contextItem.Paths.FullPath ?? "(unknown)");
    }
    return null;
}

This got me thinking. What if I try to view a Standard Values item in Experience Editor?

Bullseye.

If you want to view a branch template in Experience Editor, you must append sc_jssapp=your_app_name to the query string:

https://mysite.sc/?sc_mode=edit&sc_itemid=%7b7b3xxxxxxxxx%7d&sc_version=1&sc_lang=en&sc_site=your_site_name&sc_jssapp=your_app_name