I have a Vue app that outputs the following in the console after npm run serve.
DONE Compiled successfully in 17450ms 2:15:55 PM
App running at:
- Local: http://localhost:8080/
- Network: http://10.0.0.72:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
No issues found.
However, the app will not load on http://localhost:8080/ . The page displays the "This site cannot be reached.The connection was reset." message.
Other pages load fine, including the Node server I am using for the backend, running on localhost:3002.
I have tried removing the node_modules and running npm install again, but that hasn't fixed it. With the app compiling ok there is little help troubleshoot. There are also no errors in the browser dev tools console.
Does anyone know what might be going wrong or how to debug this?
Thanks!
change your port with npm run serve --hostname 0.0.0.0 --port 4000 and then run again.
I keep on getting "? Something is already running on port 3000" message in my terminal when I start up my react server when there is absolutely nothing running on my port 3000
What I have tried to solve with:
Restart the macOS.
checking my "http://localhost:3000" on chrome browser. (Nothing: This site can’t be reached)
Go to chrome://serviceworker-internals and chrome://appcache-internals, search for localhost:3000 (Nothing found)
I also tried almost every command lines I found on Google regarding this issue
I also created another express.js app, and it was successfully launch on port 3000 while React said there is something running on 3000. React on my computer just keeping thinking there is something running on port 3000.
If you are a windows user you can try using
npx kill-port 3000
in your console. I was having the same problem and it worked for me.
Not sure about MAC.
Open cmd and write this
netstat -a -o -n
You will get list of active connections then find 3000 by hitting
Cntrl + f
Copy the PID of that port and hit this command
taskkill /F /PID PID_of_port
Edit
This guide is for windows.
Kill Node.Js process from Task Manager.
Step 1: Open Task Manager by clicking ctrl+shift+delete
Step 2: Open Prcesses tab
Step 3: Search for Node.JS process and right click on that then click on End Task
Step 4: Now you can start again.
As #khurram khan suggested terminating the process may be the best option for you, This work for me on linux:
$ lsof -i tcp:3000
$ kill -9 PID
the first command should give you the PID number to enter in the second command as PID.
I had this problem on Mac and I solved by running:
npx kill-port 3000
I had stuck with this one for few hours, and the end I had found the solution
There was incorrect mapping to the local host in the hosts file and didn't had any relation to the port taken something like
10.2.224.130 localhost
Just Change it back to
127.0.0.1 localhost
Host file locations
https://www.howtogeek.com/howto/27350/beginner-geek-how-to-edit-your-hosts-file/
In case anyone comes across this and the above solutions didn't help, make sure your /etc/hosts has:
127.0.0.1 localhost
For some reason this was wiped from my hosts file and CRA's dependency for checking ports (detect-port-alt) checks localhost:[PORT] to see if it's available. If it errors out, you'll always get the "Something is already running..." error when checking a specific port but not when using a random port (since that's picked by the dependency).
kill node.js from the background processes. that would soleve the probelem. alterntively, you could restart your system
for window use this in package.json
"start": "set PORT=3006 && react-scripts start"
for Linux and MacOS
"start": "PORT=3006 react-scripts start"
This worked for me on windows pc. This one is for those are not seeing the port when you run this command netstat -a -o -n on your command prompt.
Open your command prompt in administrator mode and run this command
net stop winnat
you'll get this response:
The Windows NAT Driver service was stopped successfully.
Them you run this next:
net start winnat
then you will get this response:
The Windows NAT Driver service was started successfully.
once you do that. Start the react server and it would work. Same too if your backend server doesn't run on 3000
It's very simple. You can fix it in 2 easy steps.
Check your environment variables if there is a key/entry with name "PORT".
If found delete that entry or rename it to something else.
It turns out that some other program is using that variable. Usually when you start react-scripts it will look for an environment variable with that title PORT.
Date: Sat 07, October 2020
Windows: Microsoft Windows 10 Pro Build 19041
Node: 12.16.1
NPM: 6.14.8
Something similar was happening to me on my Windows machine. Tried a lot of things suggested here on StackOverflow and other places.
In my case, I was following a video course that was suggesting adding --script-version 1.1.5 (as illustrated below) when creating a new React app.
create-react-app app-name --scripts-version 1.1.5
Here's the package.json scripts versions:
React: 17.0.1
React DOM: 17.0.1
React Scripts: 1.1.5
After running the command npm start and typing y to try to use a different port, the terminal will stay stucked until it was canceled.
Then I created a new React app without --scripts-version 1.1.5 and after trying to running it, it was still running into Something is already running on port 3000 but after typing y, the app will run with no problem on a different port.
Here's the package.json scripts versions (when it was running successfully):
React: 17.0.1
React-Dom: 17.0.1
React-Scripts: 4.0.0
Starting with the reason you do not see anything on localhost:3000, is because there must be a proper webapp or a website/server running on that port, but the port:3000 is currently running some process, just not of a server/site/app.
This out of the way, depending on your type of OS, it is quite easy to check if there is in-fact a process on port:3000 or not. For MacOS, opening a terminal and running sudo lsof -i ':3000' will list the current process on port 3000.
Note that we need to run command as sudo or root
Once you see what process is running, note the PID and run kill -9 {PID}, which should kill the process with PID (i.e distruptive process on port:3000). Now doing a npm start should get your app built, compiled and served on localhost:3000
Mostly what might've happened is that you had a npm start running which you either interrupted, or closed in the foreground. Doing a fg in your terminal will open any background tasks, so if this opens a npm start instance, it was this process stopping your flow. You can then properly end the session making sure all processes on port:3000 are killed.
Happy coding
If you are on linux you can try
pkill -f node
to terminate the processs
The error occurs when a task is left running on the port properly killing it.
this error can occur on both ports. Your react app and your node server.
To solve this you can run the following commands.
netstat -anp tcp | grep 3000
This command in the terminal will give you the list of activities on port 3000
npx kill-port 3000
This command will kill all the running servers on port 3000.
Now if you have the same problem for your Node server. You can follow the same steps.
netstat -anp tcp | grep 5000
Then
npx kill-port 5000
You don't need the first command. it's just to list out the running activities on the port.
just change the port number for any other port number.
This is the output you get after running the commands.
I am using Git bash on windows.
For me, this works every time (macOS): sudo kill -9 $(sudo lsof -t -i:3000)
Simple and Easy solution
close your current terminal and open a new one.
If you are running it in VS Code just create a new terminal and delete the old one.
On React - you can run an already created React single-page application (SPA) by
npm start command.
That may start your locally hosting development server and runs your app at:
http://localhost:3000/ which is equivalent to: 127.0.0.1:3000 address
127.0.0.1 is the default localhost IP number while the default port number set by
create-react-app package is 3000.
When getting: “Something is already running on port 3000" failure error message you may think that the port captured by another process running on your machine but you’ll find that it is captured permanently as if it runs on 0.0.0.0:3000 address
Solution:
In your project libraries created by create-react-app script navigate to:
node_modules/react-scripts/scripts/start.js
While running npm start command - the start.js script is being called and executed
There at start.js file in you editor find the above line:
const HOST = process.env.HOST || '0.0.0.0';
and change it to:
const HOST = process.env.HOST || '127.0.0.1';
save and run your web app again at: http://localhost:3000/ or http://127.0.0.1:3000
Im new to vue.js and webpack. I currently have a very big trouble to archive the next step: communicate with real-world-apis in a dev env.
what i currently do is:
npm run dev
my application calls an remote api to which i have no access.
then i run into the Access-Control-Allow-Origin-Issue.
If i build my application and run it with xampp everything works fine.
What can i do, to simply develope my application instead to hassle with that security thing?
I have tried to create a proxy, so i have already looked at:
npm cors (node-cors-client and node-cors-server) - but how does that apply to my vue app?
socket.io - but it seems to be overkill
http-server - but i got the same issues here
nuxt - could work, but then i need to refactor my vue.js app to nuxt and i dont know if this works then
any suggestions? Thanks!
Solved:
I ended up with a PHP-API
The PHP-API runs with xampp under port 80
The Vue.js-App runs with npm dev server under port 8080
The CORS-Hassle must solved then in the PHP-Script with:
https://stackoverflow.com/a/9866124/3918455
I've been working on a project using React.js
It used to work fine on localhost:3000 but suddenly this has stopped working.
The commands I did before was
sudo npm run bundle
sudo npm start
And then my project was running. But now it says localhost refused connection. Message in the console:
"Failed to load resource: net::ERR_CONNECTION_REFUSED". Any ideas why?
I have checked that localhost:3000 not occupied
I have checked that Im working in the correct folder and all files seems * to be present
I have checked that Im using the latest npm and node version
You don't say what OS you are using but if it is MacOS or Linux you might want to check what $HOST is set to.
See How to start a react app with a custom host and port
I've got a simple Meteor app running on a Nitrous box. I'd like to be able to use node-inspector for server-side debugging (as described here), but I'm unable to get to the console.
My Meteor app is running locally on the box at http://0.0.0.0:3000/, and I can view it in Chrome by following the guide here. When I then run node-inspector, I get this message:
Node Inspector v0.8.3
Visit http://127.0.0.1:8080/debug?port=5858 to start debugging.
How can I get to this address? I've tried:
Navigating to https://example-name.example-region.nitrous.io:8080/debug?port=5858
Running: node-inspector --web-host 0.0.0.0
Running: node-inspector --web-host https://example-name.example-region.nitrous.io
Thoughts? Is there a way I can get to this console?
You should change the url on the box,
usually you just run the box running the meteor command
cd workspace
cd myAPP
meteor
and it works, but now you should run this commands.
cd workspace
cd myApp
ROOT_URL=http://machinename.abc1-2.nitrousbox.com meteor
Now run again node-inspector
you should get something like
Visit http://machinename.abc1-2.nitrousbox.com:8080/debug?port=5858 to start debugging.