Npm run dev not working correctly in status api folder

[tuanthanh2067]

What happened: When I try to test /src/api/status locally by using npm run dev, I received a page that looks messed up

What should have happened: It should load css and javascript properly

How to reproduce it (as precise as possible): Go to /src/api/status, then npm install, then npm run dev, and then open up your google chrome and then redirect to http://localhost:1111/

Anything else we need to know?: It seems like <base> at line 19 needs to be altered

Environment:

• OS: MacOS 12
• Browser: Google Chrome

[humphd]

The root of the problem here is that we're compensating for how our API router (Traefik) works in production, where we add /v1/status/* as a prefix, see https://github.com/Seneca-CDOT/telescope/blob/master/docker/docker-compose.yml#L34. To get around this, we added a <base href="/v1/status/" /> element to the page in order to resolve all links relative to /v1/status, see https://github.com/Seneca-CDOT/telescope/blob/master/src/api/status/public/index.html#L19. When this is run in development (i.e., outside of Docker and without Traefik), we are serving everything from / vs. /v1/status, see https://github.com/Seneca-CDOT/telescope/blob/master/src/api/status/src/server.js#L23.

A possible fix would be to add a variable to https://github.com/Seneca-CDOT/telescope/blob/master/src/api/status/env.local which we then check for before https://github.com/Seneca-CDOT/telescope/blob/master/src/api/status/src/server.js#L23, and either use / or /v1/status as the root, perhaps also adding a redirect from / -> /v1/status so people can just go to /.

Fixing this is pretty high priority, since it affects everyone working on the dashboard. I saw @Andrewnt219 asking about it in #2415, and others on Slack.