Facing issues with deploying a Vite React app built and deployed on my AWS S3 Static Webiste

Question

**HELP PLS!!!!**
I'm hosting a React app built with Vite on Amazon S3. The app loads the landing (Home) page correctly, but when I try to navigate to other routes like /about or /contact, I get a 404 error or the pages don't load as expected. I've configured S3 for static website hosting, but it seems the routing isn't working

What I've Tried:
Set index.html as both the Index Document and Error Document in the S3 static website hosting configuration.
Verified that the paths are correct and the build files are correctly uploaded to the S3 bucket.

Please help me I need those other pages' working

below are my configurations

//vite.config.ts

```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

```

//vercel.json
```
{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

```

}>
            }>
            }>
            }>

```

Riku_Kobayashi · Accepted Answer

Hello.

Is "index.html" set in the S3 error document?  
I think the following stackoverflow answers will be helpful.  
https://stackoverflow.com/questions/51218979/react-router-doesnt-work-in-aws-s3-bucket  
https://docs.aws.amazon.com/AmazonS3/latest/userguide/CustomErrorDocSupport.html

I think the following blogs will also be helpful.  
https://via.studio/journal/hosting-a-reactjs-app-with-routing-on-aws-s3

By the way, if you plan to switch to HTTPS in the future, I think it would be better to use CloudFront instead of distributing only with S3.  
https://stackoverflow.com/questions/16267339/s3-static-website-hosting-route-all-paths-to-index-html

Edmilson Junger · Answer

I believe that the current configuration of your vercel.json is redirecting all requests to the root (/). This means that if someone tries to access /about or any other URL, they will be redirected to the homepage (/). This setup doesn't work well with React Router because the router needs an index.html page to start and process the routes.

Please try this code:
//vercel.json

```
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

```
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Resources from './Resources';

function App() {
  return (

} />
        } />
        } />
        } />

);
}

export default App;

Nafiu · Answer

This is also Good

https://medium.com/@tristenwallace/solving-the-spa-refresh-problem-for-react-apps-hosted-on-aws-s3-and-cloudfront-bdaadcd5b4f3

Nafiu · Answer

This Really Helped

https://stackoverflow.com/questions/51218979/react-router-doesnt-work-in-aws-s3-bucket

![Enter image description here](/media/postImages/original/IM71hbZGmmTGeYA97pySYoyg)

Facing issues with deploying a Vite React app built and deployed on my AWS S3 Static Webiste

Relevant content