React app client-side routing not working on DigitalOcean App Platform

Question

I have deployed my React app to the DigitalOcean App Platform. The app uses client-side routing (e.g., React Router). The home page works correctly when visiting the root URL, but when I try to navigate directly to other routes by entering the URL (e.g., /auth/login), I get a 404 error (The requested page was not found). However, navigating within the app to that URL works as expected.

I have tried configuring catch-all routing using custom pages in the DigitalOcean dashboard, but it doesn't seem to work as intended.

How can I properly configure my React app on the DigitalOcean App Platform to handle client-side routing and serve the index.html file for all routes?

Additional context:

My React app is built using Vite. I am using React Router Dom for client-side routing. My app is deployed on the DigitalOcean App Platform using the default settings.

Answer 1

Because this is a static site DO had a build entry but no start script equivalent to run serve etc.

Fix was having a Catchall within custom pages and simply specifying index.html as documented here: https://docs.digitalocean.com/products/app-platform/how-to/manage-static-sites/

Initially, I tried it with /index.html which failed.

Answer 2

Since you are using React Router and it renders its own 404 page, you can route all “404 not found” requests to index.html. React can then look at the URL and generates a 404 page if the route does not exist. Here is how to do it:

• From your digital ocean dashboard, navigate to your App platform app
• Go to the "Settings" tab
• Click on Components
• Select the static site "your static site name"
• Expand the “Custom Pages” section.
• Choose “Catchall” for the type and enter index.html