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

Votyak

Does this answer your question? Vitejs React This localhost page can’t be found – Dalpe

Lol I was researching on this thing later I get to know that the project was using vue-cli-service 😂 – Splasher

Set host: true on Vite.config.js server object. – Dermatophyte

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.

Swordbill

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Milicent

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

Allege

I encountered this issue when using VSCode with the Remote-SSH extension for my Astro project. It worked fine if I logged into the remote box, but to access the dev server remotely I had to explicitly set host to '127.0.0.1'. Apparently this is an issue with Vite-based projects and VSCode Remote-SSH: github.com/microsoft/vscode-remote-release/issues/8213 – Choose

I encountered this issue after upgrading node version, Vite app couldn't be accessible via localhost though CRA app worked. This solution worked for me like a charm. Thanks a lot! – Battue

Also if you run Vite in a node docker container host: '0.0.0.0' might help. – Palladin

Is adding this line going to cause issues when publishing into production? – Maynor

I was running this in a VS Code development container with Bullseye + Node 20 LTS + TypeScript and this fixed the problem for me. 127.0.0.1 and localhost should mean the same thing, but for some reason this doesn't work. I had no problem using localhost with create-react-app, but I moved to Vite because I saw that CRA is dead. – Hiddenite

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

Lamented

Answer 4

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

Epithelioma

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

Guarantee

changing port in config worked for me on macos. thanks – Junette

I'm on WSL and thought it was some weird issue with my environment. Nothing was running on 5173, but changing it worked for whatever reason. Thanks! – Maomaoism

using ubuntu and it doesn't work on 5173 but works on 8000 :v – Six

Answer 6

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.

Cathe

yes, I have the same problem, I also just removed spaces from the folder name, and its works for me. – Votyak

yep! I had cloned a repo from azure and the root directory had some special characters. After renaming the root folder name to a simple name, it started working fine. – Unreality

Answer 7

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.

Primavera

Answer 8

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

Junkojunkyard

This is the same answer as this. Maybe just upvote that rather than adding a new answer. – Dalpe

Answer 9

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

Artificiality

Answer 10

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.

Dermot

Answer 11

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

Braley

Answer 12

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

Yawmeter

Answer 13

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!

Kowtow

Answer 14

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

Plante

Answer 15

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.

Readytowear

Answer 16

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'

Porker

Answer 17

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

Tighe

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Milicent

Answer 18

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

Ballet

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Milicent

Answer 19

just rename the html file to index.html

Birthwort

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Milicent

Answer 20

For those who are working with an extension and it is not working, consider removing background.ts from manifest.json. After that remove the extension and install it again

Elyse

Answer 21

for me this worked

tanmay@TANMAY:~/Projects/FitClub$ yarn dev --host
yarn run v1.22.22
$ vite --host

  VITE v5.2.8  ready in 184 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.25.82.128:5173/
  ➜  press h + enter to show help

I put the network IP in Host and Port accordingly in vite.config.ts

  export default defineConfig({
  plugins: [react()],
  server: {
    host: "172.25.82.128",
    port: 5173,
  },
})

after that it worked, I could also use network url directly this config is just a add on. But the main localhost url is still not working for me.

Independency

Answer 22

this one saves me -->ctto

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.

Smoot

Answer 23

this solved my problem i'm using docker

server: { host: true, }

Bakunin

Answer 24

What I'm experiencing is that Chrome is forcing http://localhost to be converted to https://localhost.

Using Chrome Incognito mode can solve this problem.

Clotho

Answer 25

probably a silly mistake but I ran into the problem that my localhost server was showing running in build logs but it wasnt successfully deploying. I overrid the build command to 'npm run dev' instead of keeping it as provided that was 'npm run build'. changed it back and it deployed successfully.

Neubauer

Answer 26

I had the issue when moving from create-react-app to vite

1. Ensure you have an index.html
2. rename the html file to index.html

Stormy

Answer 27

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

Antinomian