React Vite website 404 error after deployment

Question

I created a website using React and Vite. On localhost, it navigates to different pages without any problems. However, when I deploy it to Vercel or any other hosting provider, I get a 404 error when I try to navigate to different pages. Why is this happening?

Steps to reproduce:

Create a new React project with Vite. Install React Router. Add a few routes to your index.js file. Build your website for production. Deploy your website to Vercel or any other hosting provider. Try to navigate to different pages on your website. Expected behavior:

I should be able to navigate to different pages on my website without getting a 404 error.

Actual behavior:

I get a 404 error when I try to navigate to different pages on my website.

You can check that at https://theneonworkshop.com/ going to different pages and if it works for you then refresh the page.

Answer 1

Reload issues in Vite React apps when deployed on platforms like Vercel and Netlify can be a common challenge. These issues are typically related to caching and client-side routing. To resolve them, follow these steps:

1. Cache Control:

To tackle caching problems, you can specify cache control headers in your deployment configuration files.

For Vercel (using vercel.json):

{
  "headers": [
    {
      "source": "/(.*).html",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "no-store"
        }
      ]
    }
  ]
}

For Netlify (using netlify.toml):

[[headers]]
  for = "/*.html"
    [headers.values]
      Cache-Control = "no-store"

These configurations will ensure that critical assets like HTML files won't be cached, preventing outdated content issues.

2. Handling Routes:

Another aspect to consider is client-side routing. If your app relies on client-side routing (e.g., React Router), make sure you configure your routes correctly.

For Vercel (in vercel.json):

{
  "routes": [
    {
      "src": "/(.*).html",
      "dest": "/index.html"
    }
  ]
}

For Netlify (in netlify.toml):

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

By configuring routes this way, you ensure that all requests are directed to your index.html file, allowing your app to handle routing internally.

After making these changes, deploy your app again and thoroughly test it on both Vercel and Netlify to confirm that the reload issues have been resolved.

I hope these solutions help you conquer the reload issues and provide your users with a seamless experience. Happy coding!