Support serving UI under subdomain
Nobody has claimed this yet.
- 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.
- 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.
- 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:
- Host Temporal Frontend service (I've got it on ECS) with
TEMPORAL_UI_PUBLIC_PATH=/ - 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 = [
"/*",
]
}
}
- 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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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