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](https://github.itap.purdue.edu/ECN/webqueue2/issues/162#issuecomment-517), 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](https://scottvinkle.me/blogs/work/how-to-deploy-a-react-app-to-a-subdirectory) 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: ```js // 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: ```jsx // 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> ```