Skip to content

Modify frontend to run from an arbitrary subdirectory #171

Closed
campb303 opened this issue Jan 27, 2021 · 2 comments · Fixed by #183
Closed

Modify frontend to run from an arbitrary subdirectory #171

campb303 opened this issue Jan 27, 2021 · 2 comments · Fixed by #183
Assignees
Labels
enhancement Request for a change to existing functionality high-priority Needs immediate extra focus

Comments

@campb303
Copy link
Collaborator

The frontend currently expects to be served by the top level domain. If this domain were https://justincampbell.dev/, the frontend assumed its relative path is /. However, in order to support a reverse proxy in production as described in this comment, the frontend will need to be able to be served from a subdomain.

Ideally this configuration would come from a single point of configuration that is referenced throughout the project. This article points out several different methods of achieving this but is somewhat out of date. Using it as a starting point, the frontend needs to be modified in the following ways:

1: Add a homepage entry to the package.json file.

This value can be referenced in code by the process.env.PUBLIC_URL variable. This can either for a full top level domain like https://justincampbell.dev or a path relative to the root of the top level domain. For example, if the frontend were to be served from https://justincampbell.dev/cats, the path relative to the root of the top level domain would be /cats.

Example:

# package.json
...
homepage: "/cats",
...

2: Update non-client side routing.

Currently only API calls via fetch() are not client side routed. After a homepage entry has been added in step one, all fetch() requests to the API should be updated by using formatting strings and prepending the request path with the process.env.PUBLIC_URL variable:

// Old Fetch
fetch("/login");

// New Login
fetch(`${process.env.PUBLIC_URL}/login`);

3: Add a basename to React Router.

For all client side routing, we can set a basename attribute that prepends all Route and Link component paths. By using the homepage value from above as the basename we can have fully relative Links and Routes like this:

// process.env.PUBLIC_URL = `/cats`
<Router basename={process.env.PUBLIC_URL}>
    <Link path="/page1"> {/* Full path is /cats/page1 */}
        Page 1
    </Link>
    <Link path="/page2"> {/* Full path is /cats/page2 */}
        Page 2
    </Link>

    <Route path="/page2"> {/* Matches path /cats/page2 */}
        Welcome to Page 2!
    </Route>
</Router>
@campb303 campb303 added enhancement Request for a change to existing functionality frontend high-priority Needs immediate extra focus labels Jan 27, 2021
@campb303 campb303 added this to the v1-readonly milestone Jan 27, 2021
@campb303
Copy link
Collaborator Author

campb303 commented Feb 5, 2021

Needs merged.

@campb303
Copy link
Collaborator Author

campb303 commented Feb 8, 2021

Waiting for #183 to be merged.

Sign in to join this conversation on GitHub.
Labels
enhancement Request for a change to existing functionality high-priority Needs immediate extra focus
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants