I have a vue.js project created with Vue CLI and npm run serveit always run on localhost.
I want to access from my phone (another IP inside the same network), so I want the serve to run on 0.0.0.0. I tried adding the vue.config.js file and setting the host:
module.exports = {
publicPath: '/',
devServer: {
host: '0.0.0.0',
port: 8080
}
}
Changing the port works fine, but the host override is ignored. This is the output of serve:
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.21:8080/
At first I thought it was being ignored, so I tried setting the host to 0.0.0.1 and the output is "correct", so the file is not ignored, only the 0.0.0.0 is being changed to localhost:
App running at:
- Local: http://0.0.0.1:8080/
- Network: http://0.0.0.1:8080/
I saw in some forums that devServer has a public option to set the URL, but if I try setting pubic: 'http://0.0.0.0:8080/' I get an error:
> npm run serve
Debugger attached.
> vue-model-viewer#0.1.0 serve <my project path>
> vue-cli-service serve
Debugger attached.
INFO Starting development server...
ERROR ValidationError: webpack Dev Server Invalid Options
options should NOT have additional properties
ValidationError: webpack Dev Server Invalid Options
options should NOT have additional properties
I need to run the server on 0.0.0.0 so I can test it on my phone.
Any help will be very appreciated.
You shouldn't need to run it on 0.0.0.0 from your local machine to test it on your phone. As long as the port on which it's running is open to external traffic and your phone is connected to your LAN via wifi, you can just put the IP address of your computer and the port # in as the URL.
I am trying to deploy next js app on cPanel. I have installed node and npm on it.
How can I deploy the next js app on this set up?
I am getting the following error while trying to build the app on cpanel terminal:
Unhandled rejection TypeError: child.send is not a function
You'll need root privileges. If you've got them you can remote into your server via SSH and run the npm commands there. Then it should work. I.e, from console:
ssh user#serverip
cd /path/to/appdirectory
npm run start
There are some options to deploy NextJS app in CPanel:
You just deploy serverless app (without NodeJS) in CPanel. NextJS has provided a syntax like next export to producing optimized frontend files.
New version of CPanel already has entry point for your nodejs application:
Specify your server file on that field.
You should run next export to make static html and js files in out you can directly upload it to Cpanel as normal html website
you can run npm run export or yarn export by adding
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next export"
},
these in package.json
Next.js applications should run fine on a web hosting provider using cPanel, but running the default next.js server tends to exceed process count and memory quotas applied by those types of providers.
However you can make hosting next.js apps work if you build a production version of your app elsewhere and then use a custom server to call your next.js app to handle incoming requests.
I describe the process to deploy a very basic application as a subsite on my website here - https://www.watfordconsulting.com/2021/02/08/deploy-next-js-applications-to-a-cpanel-web-host/
All you really need to do is run next export and put the contents of the out folder in the public_html folder or /var/www/html/, /sites-available/, etc, depending on setup.
I'm trying to use service workers inside a web app using Webpack and Docker.
Everything I made for the moment is working well (service worker, webpack config, worker registration...)
Actually my app is running inside a Docker container, in this container I can start my webpack build to create all my JS files.
But now I would like to be able to use webpack dev-server and HMR with my service worker.
To do that I used https://github.com/oliviertassinari/serviceworker-webpack-plugin that correctly made a reference of my service worker inside the manifest.json
Then when I access through my web browser to my application, every built assets are found except my worker.
I run my dev-server using (I use webpack-encore), inside my docker container
encore dev-server --hot --host 0.0.0.0 --port 8080
To load my assets the browser request them on 0.0.0.0:8080 but my worker is registered from localhost:8000 so the request fail with 404 error because the worker is located 0.0.0.0:8080/sw.js instead localhost:8080/sw.js.
I would know if this was possible to fix this behavior and made my service worker working inside the webpack-dev-server on a docker container.
I know service workers are listening only their scope, in my case localhost:8000/* but the webpack-dev-server is 0.0.0.0:8080.
This is why I asking if this is possible to change this behavior to made it work, and if someone already had this problem.
Thanks
You need to expose port 8000 from your Docker container as well as port 8080. You must expose multiple ports from your Docker container for multiple web services on different ports.
docker run -p 8080:8080 -p 8000:8000
Official documentation
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
I want to change host name for testing purpose. I have tried
ng serve --host 0.0.0.0
but app again runs on localhost:4200. Is there a way that app runs on different host name (word) in browser?
If you're on Mac or Linux and just for local testing, you can edit /etc/hosts and add your own dns mapping. I'm sure you can do something similar on Windows.
For example you can add adding mysite to your hosts file:
127.0.0.1 mysite
Then you can access your app by going to http://mysite:4200.
Note that if making changes to your hosts file don't appear to work you may need to either reboot or make your OS reload your hosts file. See the bottom of this page for more information: https://www.imore.com/how-edit-your-macs-hosts-file-and-why-you-would-want
Add the next row to the end of your hosts file: 127.0.0.1 my.local.host
Start app: ng serve --host "my.local.host"