Question

catchall_document addition on Droplet rather than App?

Hi, I am hosting a React application on a Droplet using nginx. I can currently access the homepage and anything it Redirects to, but if I Refresh or type a specific page’s URL, I get a 404.

I’ve searched and found that I need a catchall_document: index.html line of code in my app somehow. But all the answers that I can find about doign that assume the SPA is on a DigitalOcean App rather than a Droplet. How do I set up a YML file on my Droplet?

Submit an answer
Answer a question...

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Bobby Iliev
Site Moderator
Site Moderator badge
• December 26, 2022

Hi there,

It sounds like you are using client-side routing is used to navigate between different pages or views without reloading the entire page.

When a user navigates to a specific URL in a client-side routed application, the browser sends a request to the server for the corresponding resource. If the server does not have a corresponding resource for that URL, it will return a 404 error.

To fix this issue, you will need to configure your server to handle client-side routing. One way to do this is to use a catch-all route that serves the index.html file for all requests, regardless of the URL.

To set up a catch-all route in your nginx configuration, you can add the following block of code to your server block:

location / {
    try_files $uri $uri/ /index.html;
}

This will tell nginx to try to find a file at the requested URL, and if it cannot find one, to serve the index.html file instead.

Best,

Bobby