JSS Deployed to Docker Container: Links to media files missing port number

Question

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?

This happens with our own 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).

Thanks in advance!

Answer 1

Using a port (ie. 44001) to browse the instance in your running container makes sense if you use the localhost domain. Each running Docker container has its own IP address that gets assigned by the pool of the network that it is connected to. If you have a specific domain used only by a container, you just need to tell your host machine which IP address your domain needs to resolve to.

You can achieve this using one of the following approaches:

1. Manually retrieving the container IP address and then manually adding a record in the hosts file (C:\Windows\System32\drivers\etc\hosts) of your host machine. You can find the IP address of a running container, running the docker inspect <container_id or container_name> command in Powershell. Keep in mind that the IP address of a running container is not always the same and it might be different next time you run your container.

2. Using and configuring the Windows Hosts Writer service implemented by Rob Ahnemann, that takes care of automatically monitoring the running containers and updating the hosts file on your host machine using container names and aliases. In addition on adding this service container in your docker-compose file, you will need to configure the needed alias for your container. For example:

    networks:
      default:
        aliases:
          - jss.sc9.local

Browsing your instance without using a port with one of these approaches should solve your issue.