How to resolve 404 error in a deployed react- vite app?

Question

I have a production-ready React app built with vite. I have run the build process and uploaded the contents of the dist file within the subdirectory it is supposed to be in. When i visit the URL it throws a 404 error in the console. Failed to load resource: the server responded with a status of 404 (Not Found) - index-77febc61.js:1 for my index.js file. I have checked the index.html file to ensure the src tag is pointing to the right js file and it seems fine.

The URL to the site should be https://mydomainname.com/susbcriber. All the files are uploaded in the subscriber directory but on visiting the site it shows a white screen with the 404 error.

Any help on how i could resolve this is greatly appreciated.

Answer 1

You should create a vercel.json file in the root directory and put this code inside it

    {
    "routes":[
        {
            "src":"/[^.]+",
            "dest":"/"
        }
    ]
    }

I guarantee it will work

Answer 2

There are some solutions, for me was the .htaccess

I put this in my .htaccess file

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

And this in my vite.config.ts

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

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