1. Configure Vite

In your React app, update the vite.config.js file as follows:

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

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
  },
});

public/_redirects → Add this file in public folder

this is for handling refreshing issue in the routes

/*    /index.html   200

2. Deploy to Netlify

Step 1: Navigate to Netlify and Authorize with GitHub

  1. Go to the Netlify website.
  2. Log in or sign up for an account.
  3. Authorize Netlify to access your GitHub account.

Step 2: Add a New Site

  1. In the Netlify dashboard, click on Add New Site.
  2. Select Import an Existing Project.

Step 3: Connect to GitHub

  1. Select GitHub as your Git provider.
  2. Choose the repository that contains your Vite React project.

Step 4: Configure Site Settings

  1. Site Name: Enter a unique site name, e.g., https://your-site-name.netlify.app.
  2. Base Directory: Provide the path of the folder containing your React site (if your React app is in the root directory, leave this blank).