New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support multiple hosts #400
Comments
What are you trying to achieve? By host I assume you actually mean web server, as a URL is just a reference pointer to an actual server. In a normal web set up these are served from one server. If you want to have multiple hosts (API calls, serve separate HTML, split the assets et cetera) then you need to run multiple servers. A single Webpack Dev Server only serves the static assets (HTML, JS, images, CSS, fonts et cetera) which you have set it up to. Webpack Dev Server provides ways to integrate other servers with the Webpack static assets (a simple example), but fundamentally they are still separate servers. |
@mummybot: I want my server to respond to any request as long as it receives it. For example, all of these: In most dev environments, the server just responds to a request and doesn't care what the host value (or |
Why do you need to change the host? Are you trying to access it from a remote browser (in a VM or a separate machine)? If so then your bundled assets should be linked without the host and port e.g.
That's not true, servers require a mapping to point URLs to actual servers. I have multiple domains set up in my hosts file on my development machine pointing to different file locations: I run Apache with many different Virtual hosts, and multiple instances of Webpack Dev Server on different ports. You are right, localhost, 127.0.0.1 and your computer's network IP point to the same location on your development machine and the server running on the port enables the browser to get to any of the URLs. However depending on where you are trying to access those URLs from (your dev box or an external computer) the host values will gain their local context. Sorry if all of this seems "obvious" and accessing it from other machines is not your issue. I just don't understand what you are trying to achieve. Edit: Removed text below that was not relevant - this is for referencing from an external machine AND working with an external server. I'm still learning this nonsense and am trying to get my head around it, but I think if you use the proxy option and provide the contentBase to the devServer, but no publicPath to the output you will find it resolves localhost/IP issues. output: {
path: path.resolve(__dirname, '/build'),
filename: 'bundle.js'
},
devServer: {
contentBase: '/build',
proxy: {
'*': 'http://localhost:5000' // Your external server being proxied
}
}, |
Thank you @mummybot for all of this info. The reason why I need to access it using multiple IP/host/domain (not sure what the right term is :-)) is that I'm trying to access the server from many devices (for example, test with iPhone, Android, tablets, etc). I could hard code my machine's IP address but that will break other developer's environments as soon as I check in my code. So here's our situation: Developer 1:
Developer 2:
Designer:
So what we all end up doing is changing the I hope that makes sense. I'm hoping I can enable something similar in Webpack Dev Server. Please let me know if there's any other information I can provide. Thanks! |
@mummybot: Just had a look at your proxy comment. Although we do use a proxy to support other requirements, I don't think it will solve our |
Okay, that makes more sense. I have yet to get hot reloading working remotely (very close though), but otherwise I have my local site set up so that it can be accessed via remote URLs. I'm not sure how an external IP mapped to your local IP will work in this situation. It hopefully will, give it a try. My set up is as follows:
<!-- In head -->
<link rel='stylesheet' href='/wp-content/themes/tpbc/build/main.css?ver=1.0.0' type='text/css' media='all' />
<!-- At bottom of page -->
<script type='text/javascript' src='/wp-content/themes/tpbc/build/app_bundle.js?ver=1.0.0'></script> The webpack.config.js is: /*global require module __dirname*/
var path = require('path'),
webpack = require('webpack'),
BrowserSyncPlugin = require('browser-sync-webpack-plugin'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
autoprefixer = require('autoprefixer'),
postcssImport = require('postcss-import'),
precss = require('precss');
var buildPath = 'wp-content/themes/tpbc/build/'; // Will probably be just 'build/' or 'dist/'. Wordpress themes are nested many directories.
var serverURL = 'http://localhost:8080/'; // Webpack Dev Server
var proxyURL = 'http://mywpsite.dev'; // Your external HTML server
var proxy = {
'*': proxyURL
};
var config = {
entry: {
app: [
'webpack-dev-server/client?' + serverURL,
'webpack/hot/only-dev-server',
path.join(__dirname, 'src/main.js')
]
},
output: {
path: path.resolve(__dirname, buildPath),
filename: '[name]_bundle.js',
publicPath: serverURL + buildPath
},
resolve: { alias: {} },
devServer: {
contentBase: serverURL + buildPath,
proxy: proxy
},
module: {
loaders: [
{
noParse: [],
test: /\.jsx?$/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.s?css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&modules&importLoaders=1!postcss-loader')
}
]
},
postcss: function(webpack) {
return [
postcssImport({ addDependencyTo: webpack }),
precss,
autoprefixer
];
},
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
proxy: serverURL
},
{
reload: false
}),
// Set the name of the single CSS file here.
new ExtractTextPlugin('main.css', { allChunks: true }),
new webpack.HotModuleReplacementPlugin()
]
};
module.exports = config; Browsersync is great, because it even gives you the output of the URLs to access by. If you are not using an external server, then this is even easier. Just make sure that you haven't hardcoded your URLs into your index.html. You may need to mess around with |
|
@sokra: wow, that's exactly what I was looking for. |
@sokra wow, amazing |
Would be extremely helpful to have that in the webpack docs. |
|
@mummybot thank you sir, this is awesome I am looking for this solution ages. ♥
|
Any updates on this? I need to have two hostnames, one for local one for LAN connection from other PCs, I need to use hostnames so that the HTTPS certificate work locally. (local.site.com and pc1.site.com) |
I have following config and it works nicely behind reverse proxy:
With such config, due to setting public to '0.0.0.0:0', it works because:
|
@sokra the ability to bind to multiple hosts enables advanced use cases:
|
I wish use in my react app Apache web server there PHP work at port 80, and Mysqly 3360. How can make this with webpack.config.js ? Do you have some sample? |
is this topic closed without a solution? |
This topic has a solution: use For advanced cases such as a different cert for each interface or choosing which interfaces is active, it seems that something more is needed. But I am not sure that this is required by many. I use nginx then. |
That's not a solution. |
The original request was: How can I configure Webpack Dev Server to listen to multiple hosts? |
Non-sequitur. What you are saying is: "the security considerations are not part of this argument, because the original intent was to expose your server everywhere." But that wasn't the case. The intent was to expose it to/for a select few hosts. Indeed, the original request was: "How can I configure Webpack Dev Server to listen to multiple hosts?" It was never stated up front by the person seeking a solution that they had the clear intent to expose their server 'everywhere' -- but they took it as a workable solution anyway, and hopefully they knew how to cover the security considerations via external firewalling. Afterwards it was rightfully noted that that |
Run two/three/four/etc server process using multiple |
Not an option for many build chains that integrate webpack as part of a larger whole. However, from a quick glance at the code for host : "0.0.0.0",
allowedHosts : [ "first.allowed.domain", "second.allowed.domain" ] |
Yes, we need to improve our docs, I think we will do it together with v4 |
How can I configure Webpack Dev Server to listen to multiple hosts?
It defaults to localhost, but it can be overwritten by specifying the
host
parameter with either a hostname or IP address. However, it seems that you can only specify one. For example, if I specify the IP Address192.168.1.20
, then it stops responding tolocalhost
. How can I configure Webpack Dev Server to listen to multiple hosts?Related to this question on SO: http://stackoverflow.com/q/33728612/188740
The text was updated successfully, but these errors were encountered: