temporalio / temporalio/ui

Support serving UI under subdomain

Open
#2,255 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
431
Forks
179
Avg merge
2d 9h
Merged PRs (30d)
71

Description

Describe the bug

Link to Slack thread where I originally asked this question.

I want to host the Temporal UI at the root path of a subdomain, e.g. temporal.[mydomain].com, using host-based routing in ALB.

This is important because I can't avoid subdomains in the URL, even if I hosted the UI at a specific path, e.g. [mydomain].com/temporal, since I also have a staging environment where the UI will be hosted at staging.[mydomain].com/temporal.

When I configure host-based routing in ALB to route temporal.[mydomain].com to the frontend service, I have two options to configure the frontend service.

  1. With TEMPORAL_UI_PUBLIC_PATH=/, the page fails to fetch the JS resources in the browser because the HTML returned from the server contains // in front of the JS bundles, e.g.
<link rel="modulepreload" href="//_app/immutable/entry/start.XNU22-I9.js"> 

This tells the browser to ignore the same origin rule, and the requests instead get sent to https://_app/immutable/entry/start.XNU22-I9.js which doesn't exist.

  1. With TEMPORAL_UI_PUBLIC_PATH=temporal.[mydomain].com, now the UI can fetch the bundles linked in the HTML, but then fails to load the JS.

E.g. this file temporal.[mydomain].com]/_app/immutable/entry/start.XNU22-I9.js contains:

import{c as a}from"../chunks/entry.npYmAy9v.js";export{a as start};

The referenced file does exist and contains a load of JS, if I go to it directly, i.e. temporal.[mydomain].com/_app/immutable/chunks/entry.npYmAy9v.js. But it fails to load in the browser:

(index):26 Uncaught (in promise) TypeError: Failed to resolve module specifier 'temporal.[mydomain].com/_app/immutable/entry/start.XNU22-I9.js'
    at (index):26:14

To Reproduce
Steps to reproduce the behavior:

  1. Host Temporal Frontend service (I've got it on ECS) with TEMPORAL_UI_PUBLIC_PATH=/
  2. Configure load balancer to forward requests matching the host and path, e.g. with ALB listener rule:
  condition {
    host_header {
      values = ["temporal.${local.domain_name}"]
    }
  }

  condition {
    path_pattern {
      values = [
        "/*",
      ]
    }
  }
  1. Visit Temporal UI in the browser, e.g. https://temporal.[mydomain].com

Expected behavior

The frontend SPA should respect the same origin rule and fetch resources from TEMPORAL_UI_PUBLIC_PATH on the same domain (including subdomains) it originated.

Screenshots

N/a

Desktop (please complete the following information):

  • OS: MacOS 14.6 (23G80)
  • Browser: Version 127.0.6533.89 (Official Build) (arm64)

Additional context

N/A

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the frontend asset-loading failure with TEMPORAL_UI_PUBLIC_PATH=/ and host-based routing, then trace how the SPA generates its resource URLs. Verify the fix by loading the UI from a subdomain and confirming that all JavaScript bundles resolve on the originating domain.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.