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.
Related
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.
Thank you so much for taking the time to check out my little conundrum. This is my first StackOverflow question, so please forgive me if I accidentally leave out something important (I'll add any information that you require if you just let me know).
My issue is this: I have a personal development VM that I use to house all of my application code, including the application's server. I use PuTTY to connect to my development VM, and I forward the port that the vert.x application server runs on (which is 7443) to my localhost. Thus, when I connect to the server, I just enter:
https://localhost:7443
in the URL bar of the browser on my local machine. I also use Gulp.js to build the UI component and watch my files for changes. Currently, the gulp watch task just rebuilds Javascript and CSS bundle files that I link to in my index.html file, and I manually reload the browser whenever the bundles are done rebuilding. I recently stumbled upon Browsersync when I was researching live-reload technologies for the browser, and it looks awesome, but I cannot get it to work with my development setup.
Here is my gulp watch task:
const browserSync = require("browser-sync").create("browser-sync-server");
gulp.task("watch", () => {
console.info("=== Initializing BrowserSync Server ===");
browserSync.init({
proxy: "localhost:7443", // This is my dev server running on port 7443
open: false // I do not want a new browser to open up when I start BrowserSync
});
console.info("=== Listening for changes to reload === ");
const jsWatcher = gulp.watch(
myJsFiles,
{ awaitWriteFinish: true },
["reload-js"]
);
const templateWatcher = gulp.watch(
myHtmlFiles,
{ awaitWriteFinish: true },
["reload-templates"]
);
const lessWatcher = gulp.watch(
myLessFiles,
{ awaitWriteFinish: true },
["reload-less"]
);
});
When I start the watch task, in the console I see:
Starting 'watch'...
=== Initializing BrowserSync Server ===
=== Listening for changes to reload ===
Finished 'watch' after 126 ms
[Browsersync] Proxying: http://localhost:7443
[Browsersync] Access URLs:
Local: http://localhost:3000
External: http://192.168.1.11:3000
UI: http://localhost:3001
UI External: http://192.168.1.11:3001
I also forward ports 3000 and 3001 to my local machine so that I can access those endpoints in my browser.
I can get to the Browsersync UI just fine at port 3001 over HTTP, but when I click on the "NEW TAB" button under Local, a new tab pops, but the server never loads. It just spins and spins, until finally I get an error in Chrome that says "No data received". Does anyone have any ideas as to what the problem could be? My guess is that is has something to do with the fact that my team's application uses HTTPS for browser access, and that Browsersync needs some further configuration to work with HTTPS, but I do not know how to go about doing this.
Thank you all so much for helping me out! Please let me know if I can provide you all with any more information.
-- Tom
Edit 5/23/18:
I used openssl to generate localhost key and cert files for my development VM, and added them to my configuration for BrowserSync in my gulpfile.js.
Here is my modified config:
const proxy = require("http-proxy-middleware");
...
browserSync.init({
ui: {
port: 8080
},
https: {
key: "./conf/browsersync/localhost.key",
cert: "./conf/browsersync/localhost.crt",
},
server: {
baseDir: "./",
index: "index.html"
},
middleware: [
proxy("/api", {
target: "https://localhost:7443",
secure: false, // Do not validate SSL certs
changeOrigin: true, // Seems to be a highly recommended setting
xfwd: true,
prependPath: true, // Ensure that the API calls are prepended with the target URL
logLevel: "debug" // So that I can see verbose console output
})
],
port: 3000,
open: false
});
This has definitely gotten me farther, but it is still not quite right. Now, when I hit https://localhost:3000 in my browser, I am taken to the index page of my web application, but none of the asynchronous API calls are getting resolved correctly. In the console where I am running the gulp watch task, I see a lot of errors from HPM (the html-proxy-middleware software). Here is one example:
[HPM] Error occurred while trying to proxy request /api/settings/ from localhost:3000 to https://localhost:7443 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
Also, if I open the Javascript console in my browser window for https://localhost:3000 (the BrowserSync session), I can see lots of 504 errors (Gateway Timeout). Any ideas? Thanks again so much for your time.
-- Tom
First of all, I agree, browsersync is awesome.
[Browsersync] Proxying: http://localhost:7443 Note the http instead of https. This cannot work. In your line proxy: "localhost:7443" you are not telling anything about the protocol. Try with a https:// prefix. Most likely you'll also need the "secure: false" or similar if your development server uses a self-signed certificate. The proxy will have to accept this certificate, not your browser.
If your backend also uses secure-only cookies, you'll have to use https on the browsersync and client side too, or your browser will refuse the secure cookie. Here is my working development config (Gruntfile syntax) doing that:
var proxy = require('http-proxy-middleware');
[...]
options: {
port: 3000,
server: {
baseDir: './',
index: '_index.html'
},
// redirect all calls to /api to the backend
https: true, // required for secure cookie to work
middleware: [proxy('/api', {
target: "https://external.backend.server",
secure: false, // required if server uses self-signed certificate
changeOrigin: true,
xfwd: true // add X-Forwarded-* headers
})],
watchTask: true,
logConnections: true,
scrollRestoreTechnique: 'cookie',
reloadDebounce: 500,
ghostMode: false
}
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.
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.
I have a website built using node.js and express in my iis webserver.
I can access the site by http://localhost:3000 and so can everyone else who are in the same domain when I put my files in /inetpub/wwwroot/ folder.
My question is, how do I make that website accessible from the internet/different domains?
My config.js file which is called from when I run app.js :
var config = {
local: {
mode: 'local',
port: 3000,
mongo: {
host: '127.0.0.1',
port: 27017
}
}
How would I modify my config file to reflect the changes I want? Thanks.
This is really done at the router level. You'll need a public IP that routes traffic to your local machine. Then you set up DNS for the IP (through a domain registrar). Though, typically, serving a site is a big security risk. You'll want to have a dedicated server set up, away from your local development machine... and keep it patched.