Vite Server is running but not working on localhost

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

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 3

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 4

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 5

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

Answer 6

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 7

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 8

Create a vite.js project and then edit the vite.config.js like this (it helps me to run the project on localhost):

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: "127.0.0.1",
    port: 3000,
  },
});

Answer 9

You don't have to change any port or anything just a --host flag should do the work.

yarn dev --host

Make sure your firewall is disabled on the private (and sometimes domain also) network, and nodejs runtime is allowed in the firewall allowed apps.

Answer 10

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 11

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 12

I guess that you have a problem in your directory, make sure that the index.html is global, means not in any directory besides your project, and also make sure that the vite.config.js is on the same level as the index.html.

Answer 13

In your vite.config.js file you can specify the value of root to direct to your index.html file. For example if your structure is src/public/index.html', you would simply need to set root: 'src/public'

Answer 14

Probably you will be using

vite start, or

vite run start

Instead of these please run this:

npm run dev

or if you using yarn then

yarn run dev

This resolved my issue.

Thank you

Answer 15

You Just Have to cd into the src folder and then run npm run dev

Answer 16

Just in case you don't have any of the issues the people above mention, it is also possible it will not run if you are working in a directory that has a space in its name like My%20Project%20 this will break vite server.

See this open issue - https://github.com/vitejs/vite/issues/8904

Answer 17

I know this is old to answer, but I fixed it using the command below.

Use:

npm run dev -- --host

Instead of:

npm run dev --host

Just add the double hyphen.

Answer 18

I think the vite localhost at default starts at localhost:5173, try this and see if it works

Answer 19

  server: {
    allowedHosts: [".localhost"],
    host: true,
  },