feat: Add support for serving frontend from non-root paths#5475
Open
NETIZEN-11 wants to merge 2 commits intolitmuschaos:masterfrom
Open
feat: Add support for serving frontend from non-root paths#5475NETIZEN-11 wants to merge 2 commits intolitmuschaos:masterfrom
NETIZEN-11 wants to merge 2 commits intolitmuschaos:masterfrom
Conversation
Fixes litmuschaos#5473 This commit enables the Litmus frontend to be served from custom base paths (e.g., /litmus, /chaos) in addition to the root path (/). This allows deployment behind path-based routing with ingress controllers like Traefik. Changes: - Configure webpack to use PUBLIC_URL environment variable for asset paths - Add <base> tag to HTML template for relative URL resolution - Configure React Router with basename for proper client-side routing - Create nginx configuration template with dynamic base path support - Update entrypoint script to generate nginx config at runtime - Add comprehensive documentation and deployment examples - Add unit tests and CI/CD workflow for testing Usage: Set PUBLIC_URL environment variable in deployment: env: - name: PUBLIC_URL value: "/litmus" The application will automatically configure itself to work from that path. Signed-off-by: NETIZEN-11 <kumarnitesh121411@gmail.com>
Contributor
|
Hey @NETIZEN-11 Some checks are failing. Could you please check? |
- Replace 'it(' with 'test(' in basePath.test.ts to comply with
jest/consistent-test-it ESLint rule (fixes frontend-checks)
- Rename forEach param 'path' to 'p' to avoid shadowing issues
- Add explicit types ['jest','node'] to tsconfig.json for test globals
- Inject process.env.PUBLIC_URL via DefinePlugin so bootstrap.tsx
correctly reads the base path at runtime
- Simplify Docker container test to not depend on upstream services,
only verify nginx starts and base path is logged correctly
Signed-off-by: NETIZEN-11 <kumarnitesh121411@gmail.com>
Author
|
Hi @PriteshKiri, Thanks for pointing it out. The failing checks have been fixed now. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Enable Frontend Support for Custom Base Paths
Fixes #5473
#Description
This PR enables the Litmus frontend to be served from custom base paths (e.g.,
/litmus,/chaos) in addition to the root path (/).It resolves issues with asset loading failures when deploying behind path-based routing (e.g., Traefik, Nginx Ingress).
#❗ Problem
Previously, the frontend relied on absolute paths (e.g.,
/main.js) which always resolved from the domain root.This caused:
example.com/litmusSolution
This PR introduces dynamic base path handling:
PUBLIC_URLfor asset paths<base>tag for correct relative URL resolutionbasenameentrypoint.sh🔧 Changes
webpack.common.js
PUBLIC_URLforpublicPathindex.html
<base href="%PUBLIC_URL%/">bootstrap.tsx
basename={process.env.PUBLIC_URL}toBrowserRouternginx.conf.template
entrypoint.sh
Dockerfile
package.json
build:subpathscriptDocumentation
BASE_PATH_CONFIGURATION.mddeployment-example.yamlTests
🧪 Testing
//litmusbasenamePUBLIC_URLis not set📦 Usage
🙌 Notes
This improves deployment flexibility and ensures compatibility with path-based routing setups.