Add support for app deployment under sub-paths #577
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.
Overview
This pull request refactors the routing system in the frontend to allow the application to be hosted under sub-paths such as
example.com/somerandomdir
.With this implementation, we can now install the applications under subdirectories rather than only at the root domain level.
Example:
The base directory
/ticketing
will be calculated from theVITE_FRONTEND_URL
environment variable:VITE_FRONTEND_URL=https://example.com/ticketing
The changes include separating route definitions and options, introducing a utility function for determining the base path, and updating relevant configurations and imports to align with the new structure.
Additional Info
Routing Refactor:
frontend/src/router.tsx
: Refactored to exportroutes
andoptions
separately for clarity. AddedgetBasePath
to dynamically determine the base path for the application based on an environment variable. [1] [2]frontend/src/entry.client.tsx
andfrontend/src/entry.server.tsx
: Updated to use the newly namedroutes
andoptions
exports instead of the previously namedrouter
constant. [1] [2] [3] [4] [5]frontend/src/App.tsx
to enforce that the app is always accessed via the base path by redirecting users if the current path does not match the base path. This is required as react-router v6 no longer does this automatically as it did in v5.Base Path Utility:
frontend/src/utilites/basePath.ts
: Introduced a new functiongetBasePath
to compute the base path dynamically based on the environment variableVITE_FRONTEND_URL
. Includes fallback and error handling for invalid URLs.Configuration Updates:
frontend/vite.config.ts
: Updated the Vite configuration to use relative paths for assets by setting thebase
property to"./"
. This allows resource URI's such as/assets/*
to change to/somebasedir/assets
dynamically.Reviews:
This is my first PR on the project! Hopefully all is well but feel free to drop a message if there is anything more I can do as I hope to contribute more in future.