Vite Server is running but not working on localhost - reactjs

Question

Vite + Reactjs server is running but I am getting
"This localhost page can’t be found
No webpage was found for the web address: https://localhost:4200/"
on the browser

Answer 1

A common mistake when moving from create react app/react-scripts to Vite is having the index.html in the public folder.
Make sure your index.html file is in the root directory for your Vite project.

Answer 2

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

Answer 3

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.

Answer 4

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...

Answer 5

I got the same problem. click collapse your project structure in vscode, vite config file was not at the level of index.html. So make sure it should be at where index.html is, Double check please!!

Answer 6

My issue that happened to me that seems possible to commonly happen was I had another index.html file in my public dir. That file will take precedence over the one in your project root, so make sure you delete that or move it elsewhere. For me, it was a remnant of a vite build that I didn't notice hung around

Answer 7

None of the answers here helped me. It turns out uBlock Origin was preventing the index.html page from loading when accessing it through localhost:3000. Disabling it or trying it in incognito mode works!

Answer 8

For me, beside server host true in the vitejs settings, I needed to update the docker run command with "--service-ports" (https://docs.docker.com/engine/reference/commandline/compose_run/):
docker-compose -p myservice run --service-ports --rm node npm run dev

Answer 9

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
}
});