[PR #3449] [MERGED] feat: support for subpath based access in SH apps #4388

New issue

Closed

opened 2026-03-17 01:55:44 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:55:44 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3449
Author: @jamesgeorge007
Created: 10/12/2023
Status: ✅ Merged
Merged: 11/22/2023
Merged by: @AndrewBastin

Base: release/2023.12.0 ← Head: feat/subpath-based-access

📝 Commits (10+)

b212479 refactor: make service worker ignore important routes
4fb351d chore: update aio Caddyfile
6023cf0 chore: convey the base route as admin where sh-admin gets served
c46fea8 fix: ensure any non-existent file in the server is routed to the corresponding SPA
d8f7647 build: generate build with admin as the base for subpath based access
2170037 refactor: infer base URL from the BASE_URL env var across the app
ae71134 chore: add TODO comment for pending Caddy configurations and port updates
671cd01 chore: generate multiple builds for sh-admin
7e10004 chore: dedicated Caddyfiles based on AIO container launch strategies
15468a1 feat: subpath access for individual containers

📊 Changes

18 files changed (+262 additions, -48 deletions)

View changed files

📝 .env.example (+3 -0)
➕ aio-multiport-setup.Caddyfile (+19 -0)
➕ aio-subpath-access.Caddyfile (+37 -0)
➖ aio.Caddyfile (+0 -11)
📝 aio_run.mjs (+2 -1)
📝 docker-compose.yml (+7 -3)
➕ packages/hoppscotch-backend/backend.Caddyfile (+3 -0)
➕ packages/hoppscotch-backend/prod_run.mjs (+66 -0)
📝 packages/hoppscotch-selfhost-web/Caddyfile (+3 -3)
➕ packages/hoppscotch-selfhost-web/selfhost-web.Caddyfile (+5 -0)
📝 packages/hoppscotch-selfhost-web/vite.config.ts (+2 -0)
📝 packages/hoppscotch-sh-admin/Caddyfile (+3 -3)
📝 packages/hoppscotch-sh-admin/prod_run.mjs (+64 -12)
➕ packages/hoppscotch-sh-admin/sh-admin-multiport-setup.Caddyfile (+5 -0)
➕ packages/hoppscotch-sh-admin/sh-admin-subpath-access.Caddyfile (+11 -0)
📝 packages/hoppscotch-sh-admin/src/modules/router.ts (+1 -1)
📝 packages/hoppscotch-sh-admin/src/pages/_.vue (+3 -1)
📝 prod.Dockerfile (+28 -13)

📄 Description

Description

This PR includes the changes for providing subpath-based access support in the AIO container and for individual containers. Two builds are generated for sh-admin to make the transition from/to subpath-based access seamless. The idea is to not call for the need to rebuild the containers while switching between multiport setup and subpath-based access.

Closes HFE-252 HBE-283 HBE-284.

Changes

Makes the service worker ignore the /admin/* and /backend/* routes such that it is always fetched from the network. The reverse proxy takes control and routes it to the corresponding service.
Two builds are generated for sh-admin:
- The legacy build with / as the base path - is generated in dist-multiport-setup.
- With /admin set as the base path and the necessary prefixes added wherever necessary (/admin for images within the public directory and set it as a base while initializing the Vue router module so the SPA considers part of the route that appears after /admin) - generated in dist-subpath-access.
- Both the above directories are copied to the container file system.
  - dist -> /site/-sh-admin-multiport-setup
  - dist-subpath-access -> /site/sh-admin-subpath-access
Dedicated Caddyfiles are introduced for the AIO container corresponding to the different launch strategies (multiport setup and subpath-based access).

aio-subpath-access.Caddyfile
- selfhost-web SPA is served on the root path / by default.
- sh-admin SPA is served at the /admin path. It serves the static files from /site/sh-admin-subpath-access with /admin as the base path.
- Backend requests hitting /backend are reverse proxied to port 8080, where the server is up and running.
- In the context of sh-admin when you initiate a full reload while on a specific route that lacks a corresponding HTML file on the server's file system, the request is redirected to the root path. This redirection is achieved by leveraging Caddy's try_files directive. As a result, control is gracefully handed back to the SPA, allowing it to handle and render the appropriate view according to the requested route. Similarly, for "selfhost-web," we have implemented a catch-all route strategy.
- Responds with 404 on visiting ports 3000 and 3100.
aio-multiport-setup.Caddyfile
- Includes the current set of changes from aio.Caddyfile serving selfhost-web on port 3000 and sh-admin legacy build on port 3100.
- Responds with 404 on visiting port 3080 that maps to port 80 in the container.
Both the files are copied over and picked based on the value for the ENABLE_SUBPATH_BASED_ACCESS environment variable within the aio_run.mjs launch script.
Introduces 2 Caddyfiles for sh-admin, sh-admin-multiport-setup.Caddyfile & sh-admin-subpath-access.Caddyfile. Both listen on ports 3100 & 80 (standard HTTP ingress port) and serve the respective directories (multiport setup/subpath-based access).

Both the files are copied over to the container and the one to be consumed is determined in the prod_run.js script based on the value for the ENABLE_SUBPATH_BASED_ACCESS environment variable.
For the backend container, a new Caddyfile is added, backend.Caddyfile -> Acts as a reverse proxy on ports 80 (standard HTTP ingress port) and 3170 and forwards them to localhost:8080 where the backend server is up and running.

The launch script prod_run.mjs starts the server and the Caddy service.

The server is made to run on port 8080 which was previously at 3170. This was required since Caddy now sets listeners on ports 80 and 3170.
Additional Caddyfile added for selfhost-web, selfhost-web.Caddyfile that listens on ports (standard HTTP ingress port) 80 & 3000 and serves the static files.

The user needs to maintain a reverse proxy in front to achieve the subpath-based access behavior for individual containers. For instance, refer to the below Caddyfile.

:3500 {
	reverse_proxy /admin* localhost:3100

	handle_path /backend* {
		reverse_proxy localhost:3170
	}

	reverse_proxy localhost:3000
}

A 404 page is displayed if attempting to visit the sh-admin service individually from localhost:3100 or localhost:3280 while opting for subpath-based access since the build served is supposed to be from /admin.