https://github.com/azurespheredev/vite-react-troubleshooting

My solution for resolving issues with react-router-dom in Vite + React project on production.
https://github.com/azurespheredev/vite-react-troubleshooting

configuration deployment react react-router-dom troubleshooting vercel vite

Last synced: 2 days ago
JSON representation

My solution for resolving issues with react-router-dom in Vite + React project on production.

• Host: GitHub
• URL: https://github.com/azurespheredev/vite-react-troubleshooting
• Owner: azurespheredev
• Created: 2024-07-02T10:28:04.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-08-01T16:18:00.000Z (3 months ago)
• Last Synced: 2024-11-12T10:48:34.851Z (2 days ago)
• Topics: configuration, deployment, react, react-router-dom, troubleshooting, vercel, vite
• Language: CSS
• Homepage: https://vite-react-boilerplate.vercel.app/solution
• Size: 39.1 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Fixing Routing on Vercel Deployment with Vite and React Router

Here I've described how to address a common routing issue encountered when deploying a Vite + React application with React Router to Vercel.

### The Problem

Single Page Applications (SPAs) handle routing on the client-side. When a user refreshes a specific route within the SPA, the server might not recognize that route and return a 404 error because there's no corresponding static file.

### The Solution

Vercel is configured to handle SPAs by default. However, you can add a configuration file (`vercel.json`) to ensure proper routing behavior:

1. **Create `vercel.json`:** In the project's root directory, create a file named `vercel.json`.

2. **Add Rewrite Rule:** Paste the following code snippet into the `vercel.json` file:

```json

{

  "rewrites": [

    {

      "source": "/(.*)",

      "destination": "/index.html"

    }

  ]

}

```

This configuration tells Vercel to rewrite any incoming request path (`/.*`) to serve the `index.html` file. This React app will handle the routing based on the URL within the `index.html`.

### Benefits

- Prevents 404 errors on route refresh.

- Improves user experience by ensuring secure navigation within our SPA.

### Additional Notes

- While Vercel handles routing by default, this configuration explicitly defines the behavior, making our deployment more robust.

- Remember to commit the `vercel.json` file to our version control system for future deployments.

### Resources

- Vercel Documentation on Rewrites: [https://vercel.com/docs/edge-network/rewrites](https://vercel.com/docs/edge-network/rewrites)

- React Router Documentation: [https://reacttraining.com/react-router](https://reacttraining.com/react-router)