chore(dev): support accessing the dev server from non-localhost by imnotjames · Pull Request #887 · grimmory-tools/grimmory

imnotjames · 2026-04-25T21:26:33Z

Description

updates the dev docker compose configuration to support accessing the dev server from any domain or IP. this is important for validating the dev server in situations where you CANNOT run the server locally - such as mobile browsers

this could be improved upon in the future but for right now it should work for our use cases

Linked Issue: Fixes #886

Changes

updates the dev.docker-compose.yaml to use a CORS origin of *
updates the dev environment in the UI to look at the current hostname + port 6060

Summary by CodeRabbit

Chores
- Enhanced backend CORS configuration to support broader request origins
- Updated frontend to dynamically detect API endpoints based on deployment hostname instead of hardcoded values, enabling improved flexibility across different deployment scenarios

coderabbitai · 2026-04-25T21:26:45Z

📝 Walkthrough

Walkthrough

Configuration updates to support non-localhost development environments. The backend Docker Compose file now accepts requests from any origin, and the frontend environment configuration dynamically uses the runtime hostname instead of hardcoded localhost values.

Changes

Cohort / File(s)	Summary
Backend CORS Configuration `dev.docker-compose.yml`	Updated `ALLOWED_ORIGINS` from explicit localhost origin to wildcard (`*`) to permit cross-origin requests from any source.
Frontend API Configuration `frontend/src/environments/environment.ts`	Replaced hardcoded localhost URLs with runtime hostname discovery using `window.location.hostname`, enabling dynamic API and WebSocket connections based on deployment host.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested labels

frontend, backend, chore

Poem

🐰 Localhost chains have come undone,
The frontend hops to any host it's run,
With window.hostname now in play,
Mobile testing brightens the dev's day!
From phone to tablet, anywhere's the way. 🌍

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title follows the conventional commit format (chore(dev): support accessing the dev server from non-localhost) and accurately summarizes the main changes in the pull request.
Description check	✅ Passed	The PR description includes the required template sections (Description and Changes) with detailed explanations and references the linked issue `#886`.
Linked Issues check	✅ Passed	The code changes fully address the objectives in issue `#886` by enabling non-localhost access through CORS configuration changes and dynamic hostname discovery in the UI.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the linked issue `#886`: CORS configuration and dynamic hostname resolution for non-localhost dev access.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

✨ Simplify code

Create PR with simplified code

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/environments/environment.ts`:
- Around line 4-5: BASE_URL and BROKER_URL are hardcoded with http:// and ws://
which causes mixed-content failures when the frontend is served over HTTPS and
also ignore any overridden backend port; update environment.ts to derive the
protocol from window.location (use window.location.protocol to choose http vs
https and ws vs wss) and derive the port from a configurable BACKEND_PORT
fallback to window.location.port (or include a separate FRONTEND_BACKEND_PORT
env var) so BASE_URL and BROKER_URL are built dynamically (referencing the
BASE_URL and BROKER_URL constants and window.location) to avoid mixed content
and respect overridden ports.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: c5251c3f-1e39-40d7-9119-d311e6da53d4

📥 Commits

Reviewing files that changed from the base of the PR and between 42c7417 and a4a2bd8.

📒 Files selected for processing (2)

dev.docker-compose.yml
frontend/src/environments/environment.ts

📜 Review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: Test Suite / Frontend Tests
GitHub Check: Test Suite / Backend Tests
GitHub Check: Analyze (java-kotlin)
GitHub Check: Analyze (javascript-typescript)

🧰 Additional context used

📓 Path-based instructions (3)

frontend/src/**/*.{ts,tsx,html,scss}

📄 CodeRabbit inference engine (AGENTS.md)

Use 2-space indentation in TypeScript, HTML, and SCSS in frontend code

Files:

frontend/src/environments/environment.ts

frontend/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Prefer inject() over constructor injection in frontend code

Files:

frontend/src/environments/environment.ts

frontend/src/**/*.{ts,tsx,html}

📄 CodeRabbit inference engine (AGENTS.md)

frontend/src/**/*.{ts,tsx,html}: Follow frontend/eslint.config.js: component selectors use app-, directive selectors use app, and any is disallowed in frontend code
Put user-facing strings in Transloco files under frontend/src/i18n/

Files:

frontend/src/environments/environment.ts

🧠 Learnings (2)

📚 Learning: 2026-04-04T14:02:30.887Z

Learnt from: balazs-szucs
Repo: grimmory-tools/grimmory PR: 372
File: Dockerfile:72-73
Timestamp: 2026-04-04T14:02:30.887Z
Learning: In the grimmory project (grimmory-tools/grimmory), enabling heap dumps by default in the Dockerfile via `-XX:+HeapDumpOnOutOfMemoryError` and `-XX:HeapDumpPath=/tmp/heapdump.hprof` in `JAVA_TOOL_OPTIONS` is the intentional team standard. Do not flag this as an issue in future reviews.

Applied to files:

dev.docker-compose.yml

📚 Learning: 2026-04-05T21:16:01.715Z

Learnt from: balazs-szucs
Repo: grimmory-tools/grimmory PR: 385
File: frontend/src/app/app.component.ts:55-56
Timestamp: 2026-04-05T21:16:01.715Z
Learning: When reviewing code in the Grimmory frontend (Angular), prefer modern Angular patterns. Specifically: (1) Prefer `DestroyRef` with `takeUntilDestroyed(destroyRef)` for teardown in Angular v16+ instead of manually tracking `Subscription` arrays and calling `unsubscribe()` in `ngOnDestroy()`. (2) Prefer `inject()` for dependency injection over constructor injection where appropriate. (3) Prefer Angular signals (e.g., `signal`, `computed`) over `BehaviorSubject`/`Observable` for state where signals/computed values fit the use case. Flag older patterns when they can be replaced with these modern equivalents without changing behavior.

Applied to files:

frontend/src/environments/environment.ts

🔀 Multi-repo context grimmory-tools/grimmory-docs

Linked repositories findings

grimmory-tools/grimmory-docs

docs/testing/testing-setup.md: references Access the app at http://localhost:6060 and includes steps referring to docker-compose and modifying docker-compose for testing. [::grimmory-tools/grimmory-docs::docs/testing/testing-setup.md:58]
docs/initial-setup.md: instructs to open http://localhost:6060. [::grimmory-tools/grimmory-docs::docs/initial-setup.md:9]
docs/installation.md: multiple references to http://localhost:6060 and "Or from another device on your network: http://YOUR_SERVER_IP:6060" (lines show both localhost guidance and non-localhost example). [::grimmory-tools/grimmory-docs::docs/installation.md:148,151,190]
docs/getting-started.md: instructs opening http://localhost:6060 for first launch/setup wizard. [::grimmory-tools/grimmory-docs::docs/getting-started.md:44]
docs/integration/* (koreader, opds, kobo): examples of API endpoints using port 6060 and placeholders like http://your-server:6060 (these are consumers of the HTTP/WebSocket dev port but use host placeholders). [::grimmory-tools/grimmory-docs::docs/integration/koreader.md::24] [::grimmory-tools/grimmory-docs::docs/integration/opds.md::31-32] [::grimmory-tools/grimmory-docs::docs/integration/kobo.md::81]

Notes: The docs consistently reference port 6060 and often show hard-coded localhost URLs; the PR's change to allow non-localhost access and to derive the UI dev API host from window.location.hostname aligns with these docs but may require updating text/examples to reflect permissive CORS and runtime hostname usage (e.g., instructions about accessing from other devices).

🔇 Additional comments (1)

dev.docker-compose.yml (1)

18-18: LGTM — wildcard CORS is appropriate for dev only.

SecurityConfig.corsConfigurationSource() uses setAllowedOriginPatterns(List.of("*")) for the wildcard case, which is compatible with setAllowCredentials(true) (unlike a literal Access-Control-Allow-Origin: *). The config also logs a warning, which is the desired signal in dev. Just confirm this file is never used as a base for prod compose configs.

…mory-tools#887)

imnotjames added 2 commits April 25, 2026 16:57

chore: update dev CORS to allow any host

557ed81

chore(dev): use dyanmic hostname for dev

a4a2bd8

imnotjames requested a review from zachyale April 25, 2026 21:26

zachyale approved these changes Apr 25, 2026

View reviewed changes

coderabbitai Bot added backend chore frontend labels Apr 25, 2026

imnotjames enabled auto-merge (squash) April 25, 2026 21:28

imnotjames disabled auto-merge April 25, 2026 21:28

coderabbitai Bot reviewed Apr 25, 2026

View reviewed changes

Comment thread frontend/src/environments/environment.ts

imnotjames merged commit 254765f into grimmory-tools:develop Apr 25, 2026
16 checks passed

github-merge-queue Bot pushed a commit that referenced this pull request Apr 25, 2026

chore(dev): support accessing the dev server from non-localhost (#887)

36cc340

dsmouse pushed a commit to dsmouse/grimmory that referenced this pull request May 11, 2026

chore(dev): support accessing the dev server from non-localhost (grim…

5e4ecba

…mory-tools#887)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(dev): support accessing the dev server from non-localhost#887

chore(dev): support accessing the dev server from non-localhost#887
imnotjames merged 2 commits into
grimmory-tools:developfrom
imnotjames:chore/886/support-mobile-dev

imnotjames commented Apr 25, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 25, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

imnotjames commented Apr 25, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Apr 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Linked repositories findings

grimmory-tools/grimmory-docs

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

imnotjames commented Apr 25, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 25, 2026 •

edited

Loading