Modify frontend to run from an arbitrary subdirectory

[campb303]

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]

Needs merged.

[campb303]

Waiting for #183 to be merged.