Vite Server is running but not working on localhost

Make sure your index.html file is in the root directory for your Vite project

TLDR: Change the Port

For me, it was that I already had something running on the port that Vite was trying to serve the app on (3000).

Doing a quick lsof -nPi :3000 (MacOSX) I saw that my docker desktop was running on that port.

You can do this statically by updating a server key in the vite config (vite.config.js)

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

Or dynamically via the start command: vite --port 8000

https://vitejs.dev/config/#config-file

I had the same problem and it was related to the project folder name. It had some spaces in the name of the project's folder. I removed spaces and the node_module folder then I installed packages again, and now it's working fine.

Just in case someone is looking for a solution and the other answers didn't work, here is what worked for me.

In vite.config.js I had to set the host to '127.0.0.1' in the server options.

{
  server: {
    host: '127.0.0.1'
  }
}

The default value is localhost but why that doesn't work I still don't know...

I have the same issue, but there was nothing using the port 3000, but anyways, I change it to port 8000 and it's working

export default defineConfig({
  plugins: [react() tsconfigPaths()],
  server: {
    port: 8000
  }
});