JSS Integrated Mode in a Docker Container: Sitecore produces image URLs with no port number

jasonjohnlee commented 4 years ago

Description

When I deploy a JSS app to a Sitecore instance running in a Docker Container and run our applications in Integrated Mode, our application is accessible with a hostname and port number (e.g. http://jss.sc9.local:44001/). However, the page that Sitecore renders contains image links that are missing the port number and result in HTTP 404 errors (e.g. the link Sitecore renders in the page is http://jss.sc9.local/-/jssmedia/jss-helix-react-ts-starter/data/media/img/sc_logo.ashx?h=51&iar=0&w=204&hash=D53403E7F32EFFCEAB6C3FBC8E88E034 instead of http://jss.sc9.local:44001/-/jssmedia/jss-helix-react-ts-starter/data/media/img/sc_logo.ashx?h=51&iar=0&w=204&hash=D53403E7F32EFFCEAB6C3FBC8E88E034).

How do we get Sitecore to render the pages with the port number in the image URLs? Is it related to this problem?

I also posted this same question on Stack Exchange here last week, but there is currently no solution on that thread.

Expected behavior

When Sitecore runs in a Docker container and returns a webpage rendered in integrated mode, the URLs to the images should contain the port number exposed by the Docker container.

Steps To Reproduce

This happens with our own custom application as well as with this starter application. Both are React applications. I tried adding the port number to the hostname attribute of the site element of the sitecore/config/*.config as shown below, but that breaks Sitecore's URL application resolution (e.g. going to http://jss.sc9.local:44001 gives you the generic Sitecore page instead of our application).

Your Environment

Sitecore Version: 9.3 JSS Version: "@sitecore-jss/sitecore-jss-cli": "^12.0.0", Browser Name and version: Chrome and Chromium Edge Operating System and version (desktop or mobile): Windows Link to your project (if available):

jasonjohnlee commented 4 years ago

A quick update that Alessandro posted a workaround on my StackExchange question that works. However, it's not quite a final/ideal situation since the solution stops working if the container restarts/gets a new IP and is additional work/complication whenever a new dev gets started on the project. An ideal solution is that the URLs would be rendered using the sitecore.layoutServiceHost setting in the scjssconfig.json (or another similar setting) since you can specify port numbers in that setting and Sitecore Integrated mode renders a page that makes layout service requests using that hostname-port combination.

nickwesselman commented 4 years ago

Hey @jasonjohnlee,

Instead of adding the port number to the hostName attribute, can you try adding a port attribute?

Otherwise, I'd agree with the StackExchange answer, except instead of manually editing the hosts file, follow the suggestion of using Windows Hosts Writer, or a similar solution like whales-names.

jasonjohnlee commented 4 years ago

Hi @nickwesselman, unfortunately, I don't think port is a valid attribute according to the documentation...I wish it was that easy. :) https://doc.sitecore.com/SdnArchive/Articles/Administration/Configuring%20Multiple%20Sites/Adding%20New%20Site/site%20Attribute%20Properties.html

nickwesselman commented 4 years ago

@jasonjohnlee Not on SDN but I'm looking at the Kernel code right now and it's there. :) Can you see if it solves for you?

jasonjohnlee commented 4 years ago

Hi @nickwesselman. I just gave it a try, but unfortunately Sitecore serves up the default Sitecore page rather than my app if I change my config to this. :( i.e. adding a port attribute has same affect as just adding it the port to hostName

      <site patch:before="site[@name='website']"   
            inherits="website"  
            name="jss-helix-react-ts-starter"  
            hostName="jss.sc9.local"  
            rootPath="/sitecore/content/jss-helix-react-ts-starter"  
            port="44001"
            startItem="/home"  
            database="master" />

Sitecore / jss