nuxt.js always defaults to localhost despite host being defined as frontend.gradez.loc in nuxt.config.js
Contents of nuxt.config.js:
server: {
host: 'frontend.gradez.loc',
port: 3000
},
Contents of package.json:
"config": {
"nuxt": {
"host": "frontend.gradez.loc",
"port": "3000"
}
}
nuxt launch script as dev:
"dev": "nuxt --hostname frontend.gradez.loc --port 3000",
For some odd reason when starting the development script it always defaults to: Listening on: http://localhost:3000/
I tried to do exactly the same on react and the only thing I had to do was create a .env file and inside it I added host=frontend.gradez.loc and it worked just like that.
To create your server, under the hood Nuxt uses Node's http.createServer, then calls listen({ host, port }) on that server.
So if on your local machine the hostname frontend.gradez.loc is mapped to 127.0.0.1, which I assume is the case, then that server is running on the IP 127.0.0.1.
To create the url you see printed in Listening on..., Nuxt gets the IP of that underlying server, and maps it back to a hostname string. It statically maps the IP 127.0.0.1 to the string 'localhost', so no matter what host you configure, if it maps to 127.0.0.1 then Nuxt will always map that to localhost in that url. The code that does this is here.
There's nothing incorrect per-se about reporting the server is running on localhost:3000 rather than frontend.gradez.loc:3000. It's literally true, in a networking sense, because both ultimately point to 127.0.0.1:3000. So nothing is broken here from the perspective of the dev server, it's working as designed.
I'm not sure if you have anything automatically loading that url in the browser when you start the server - if so I can see how this is inconvenient from the perspective of other things in your workflow coupled to that hostname such as cookies, proxy servers etc - but if you manually type frontend.gradez.loc:3000 into your browser everything will just work.
I'm trying to switch from localhost to a specific IP address, but I keep getting this error:
listen EADDRNOTAVAIL 192.168.1.139:8000
webpack.config.js
devServer: {
host: '192.168.1.139',
port: '8000',
compress: true,
}
The error you encountered:
listen EADDRNOTAVAIL 192.168.1.139:8000
Throws due to binding to already used port, it means 8000 is currently being managed eg. from another application (You must change a port or you must kill a process).
For your case of making local IP address binded as host it is possible for example via npm/yarn start:
"start": "webpack-dev-server --inline --port 8080 --host 192.168.1.139 --content-base ."
Assuming your machine's local IP is 192.168.1.139.
Based on Snippet from issue #147 webpack-dev-server.
As you are trying to map to a differrent ip : You need an entry in your hosts file as well to point that to localhost.
add the below in to your hosts file
127.0.0.1 192.168.1.139
I am working on a project on a remote server since I need python and DB resources that my local machine can't access.
I've read this page a few times now:
https://github.com/gruntjs/grunt-contrib-connect
... and can't find out what is meant by some of the terms.
In my Gruntfile.js I see:
// The actual grunt server settings
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729
},
√ What exactly does "outside" mean? got it
√ What is "the server" referring to? got it
I am running grunt serve on a linux remote server and want to see my project livereload in my web browser. What URL should I use in the browser and what should the Gruntfile contain? Is this even possible?
When I run http://MyRemoteHostName:9000/ while using 0.0.0.0 as the hostname setting, the DNS address cannot be found.
Note that the apache web server/python code repository on my remote host is exposed to the web via another URL like http://special.development.url.com but this fails to show the app as well:
http://special.development.url.com:9000
What exactly does "outside" mean?
A different computer.
The default is localhost which (unless you use some kind of port forwarding such as ssh tunnelling) can only be accessed from the computer it is running on. 0.0.0.0 means all the network interfaces in the computer (including any ethernet and wifi connections).
What is "the server" referring to?
The description of grunt-contrib-connect is Start a connect web server. That is the server it is talking about.
When debugging a Node.js application, I expect the command node index.js --inspect=5858 to make my index.js file debuggable on the port 5858.
When I run the application outside of Docker, on my host computer, I'm able to debug the application in Chrome Dev Tools. I did the same inside of Docker and Chrome Dev Tools is unable to access the debugger on port 5858.
As you can see, port 5858 is exposed to the host computer for debugging:
version: '2'
services:
server:
build: .
command: node index.js --inspect=5858
volumes:
- .:/app
ports:
- "8000:8000"
- "5858:5858"
environment:
- NODE_ENV = "development"
I've specified localhost:5858 and 127.0.0.1:5858 network endpoints in Chrome Dev Tools, though still Dev Tools does not connect to it automatically as it suggests.
This seems to be an issue with my Docker setup though as you can see, I have exposed the port to the host computer. What could be the issue? Thanks.
The issue is that when you are running it inside the container it is listening only to localhost by default. So you have two options
Use host network
Add network_mode: host to your service and remove the port mappings. Not an ideal thing to do
Make sure nodejs listens to every IP
Change
command: node index.js --inspect=5858
to
command: node --inspect=0.0.0.0:5858 index.js
There is some webpack dev server config (it's part of the whole config):
config.devServer = {
contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
stats: {
modules: false,
cached: false,
colors: true,
chunk: false
},
proxy: [{
path: /^\/api\/(.*)/,
target: options.proxyApiTarget,
rewrite: rewriteUrl('/$1'),
changeOrigin: true
}]
};
function rewriteUrl(replacePath) {
return function (req, opt) { // gets called with request and proxy object
var queryIndex = req.url.indexOf('?');
var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
req.url = req.path.replace(opt.path, replacePath) + query;
console.log("rewriting ", req.originalUrl, req.url);
};
}
I execute webpack with the following command:
node node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --history-api-fallback --debug --inline --progress --config config/webpack.app.dev.js
I can get access to dev server using http://localhost:8080 on my local machine, but I also want to get access to my server from my mobile, tablet (they are in the same Wi-Fi network).
How can I enable it? Thanks!
(If you're on a Mac and network like mine.)
Run webpack-dev-server with --host 0.0.0.0 — this lets the server listen for requests from the network, not just localhost.
Find your computer's address on the network. In terminal, type ifconfig and look for the en1 section or the one with something like inet 192.168.1.111
In your mobile device on the same network, visit http://192.168.1.111:8080 and enjoy hot reloading dev bliss.
You can set your ip address directly in webpack config file:
devServer: {
host: '0.0.0.0',//your ip address
port: 8080,
disableHostCheck: true,
...
}
It may not be the perfect solution but I think you can use ngrok for this.
Ngrok can help you expose a local web server to the internet.
You can point ngrok at your local dev server and then configure your app to use the ngrok URL.
e.g Suppose your server is running on port 8080. You can use ngrok to expose that to outer world via running
./ngrok http 8080
Good thing about ngrok is that it provides a more secure https version of exposed url which you give to any other person in the world to test or show your work.
Also it has lots of customization available in the command such as set a user friendly hostname instead of random string in the exposed url and lots of other thing.
If you just want to open your website to check mobile responsiveness you should go for browersync.
For me, what helped eventually was adding this to the webpack-dev-server config:
new webpackDev(webpack(config), {
public: require('os').hostname().toLowerCase() + ':3000'
...
})
and then also changing babel's webpack.config.js file:
module.exports = {
entry: [
'webpack-dev-server/client?http://' + require('os').hostname().toLowerCase() + ':3000',
...
]
...
}
Now just get your computer hostname (hostname on OSX's terminal), add the port you defined, and you're good to go on mobile.
Compared to ngrok.io, this solution will also let you use react's hot reloading module on mobile.
I could not comment in order to add additional information to forresto's answer, but here in the future (2019) you'll need to add a --public flag due to a security vulnerability with --host 0.0.0.0 alone. Check out this comment for more details.
In order to avoid "responding to other answers" as an answer here's forresto's advice plus the additional details you'll need to make this work:
Add both:
--host 0.0.0.0
and
--public <your-host>:<port>
where your-host is the hostname (for me it is (name)s-macbook-pro.local)) and port is whatever port you're trying to access (again, for me it's 8081).
So here's what my package.json looks like:
"scripts": {
...
"start:webpack": "node_modules/.bin/webpack-dev-server --host 0.0.0.0 --public <name>s-macbook-pro.local:8081",
...
},
I found this thread while searching for a solution that would satisfy the following requirements:
automatically open URL using the public IP. For example, http://192.168.86.173:8080. So it could be copied from the browser and sent to another device in the network.
dev server is available in the local network.
Webpack 4
devServer: {
host: '0.0.0.0',
useLocalIp: true,
}
Webpack 5
devServer: {
host: 'local-ip',
}
With webpack-dev-server v4.0.0+ you need
devServer: {
host: '0.0.0.0',
port: 8030,
allowedHosts: ['all'] // or use 'auto' for slight more security
}
If you tried everything stated in the other answers here, without success... also make sure there's no firewall running on you machine(s) or open the needed ports on it.