1

How can I configure Sitecore to host my JSS app at a specific port on localhost? e.g. if I navigate to localhost:44011, my site renders instead of the default Sitecore home page.

Our React single-page app is hosted in a Docker container for local development. Our app allows the user to directly authenticate against Azure Active Directory using the msal-browser module. Modules like msal-browser and Okta require access to WebCrypto when rendering in Chromium browsers but they can't access it unless they are at a secure origin or localhost as per the specification. If the web page isn't served from a secure location, you'll get an error message like BrowserAuthError: pkce_not_created: The PKCE code challenge and verifier could not be generated.

Using Sitecore as the identity provider and federating it with Azure AD is not an option.

I tried approaches unsuccessfully so far.

Failed Approach 1: Port in the patch file's hostname

I tried changing the site declaration in my patch file to include the port in the hostname attribute

<site patch:before="site[@name='website']"
        inherits="website"
        name="portal"
        hostName="localhost:44001"
        rootPath="/sitecore/content/my-app"
        startItem="/home"
        database="master" />
</sites>

The result is that the default Sitecore home page renders when I visit localhost:44001 rather than my app. Probably because the hostName expects only the hostname and not the port, so Sitecore can't resolve the name. Sitecore docs for the site element don't specify a way to declare a port.

Failed Approach 2: No hostname in patch file

I tried changing the site declaration in my patch file to exclude the hostname attribute.

<site patch:before="site[@name='website']"
        inherits="website"
        name="portal"
        rootPath="/sitecore/content/my-app"
        startItem="/home"
        database="master" />
</sites>

The result my app renders without images when I visit localhost:44001. When I inspect the returned HTML, the URLs to the images are missing the port number.

Failed Approach 3: Use an hostname alias for the app

When I followed the JSS Getting Started docs, I tried changing the site declaration in my patch file to use an alias in the hostname attribute and added that alias to my hosts file.

<site patch:before="site[@name='website']"
        inherits="website"
        name="portal"
        hostName="myapp.local"
        rootPath="/sitecore/content/my-app"
        startItem="/home"
        database="master" />
</sites>

The result my app home page renders correctly when I visit myapp.local. When I try to start the login process using msal-browser, I get the The PKCE code challenge and verifier could not be generated as mentioned above.

Thanks in advance!

3
  • 1
    I am going to assume with Approach 3 above you manually edited the hosts file with your Docker IP address, and it is still running under http, you did not bind an SSL cert to it? You need your instance to be running using https so you need to add bind your cert... – jammykam Oct 20 '20 at 5:03
  • Correct, I added added the docker IP to the hosts file and we are not using HTTPS. I realize using HTTPS will solve the problem but hoping there is a way to avoid having to do that given these Docker containers are on dev machines and trying to avoid some churn (e.g. having to get all the dev machines SSL certs, or everyone having to use unsigned certs which security team might not like). We can purse using HTTPS if there is no other option. – KingTwinkie Oct 20 '20 at 13:23
  • have you tried excluding the port from the hostName file? IIRC you don't need the port in there, it will resolve from localhost correctly. – Richard Seal Nov 4 '20 at 14:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.