Blank Page on Refresh of Non-Homepage Routes

[sayem314]

When deploying Checkmate using the docker compose (where the React frontend is served by the backend server), navigating to any non-homepage route (e.g., /uptime) works correctly initially. However, if the page is refreshed (e.g., Cmd+R or F5), the browser displays a blank page. Navigating back to the root (/) resolves the issue, and the application loads again. This indicates a client-side routing issue where the server is not falling back to serving index.html for direct requests to sub-routes.

Steps to Reproduce:

• Deploy Checkmate using the docker-compose.yml template from https://kvmpods.com/app-templates/checkmate.
• Configure UPTIME_APP_API_BASE_URL, UPTIME_APP_CLIENT_HOST, CLIENT_HOST, and JWT_SECRET appropriately (either hardcoded or via .env file as per the template).
• Start the application: docker compose up -d
• Open the application in a web browser (e.g., http://localhost:300).

Navigate to a non-homepage route within the application (e.g., http://localhost:300/uptime). The page loads correctly.

Perform a hard refresh on the browser (e.g., Cmd+R on Mac, F5 on Windows/Linux).

Expected Behavior:

The application should reload the current page (http://localhost:300/uptime) successfully, serving the index.html and allowing the client-side router to handle the route.

Actual Behavior:

The browser displays a blank page. No content is loaded.

Impact:

Users are unable to directly refresh specific pages or bookmark non-homepage routes, as direct access to these URLs fails.

[gorkem-bwl]

Thanks @sayem314 for this issue! We'll have a look at it, or a contributor can grab it :)

[karins28]

I’m wondering if this might be related to how static files are served — since the backend is responsible for serving the frontend. Could it be that when you refresh on a non-homepage route, the network shows a GET request to that path, but responds with a 404 Not Found?

It seems like on the homepage, the server correctly returns index.html, but for any other route (like /uptime), it tries to resolve that path as a file and doesn't find it — so it returns a 404.

In that case I think the right approach be to update the backend so that it catches client-side routes and returns index.html in those cases, what are your thoughts?

[sayem314]

Rewrite rules should fix