Webpack-dev-server: Support multiple hosts

[johnnyoshika]

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 Address 192.168.1.20, then it stops responding to localhost. How can I configure Webpack Dev Server to listen to multiple hosts?

Related to this question on SO: http://stackoverflow.com/q/33728612/188740

[mummybot]

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.

[johnnyoshika]

@mummybot: I want my server to respond to any request as long as it receives it.

For example, all of these:

• http://localhost:3000
• http://127.0.0.1:3000
• http://192.168.1.100:3000

In most dev environments, the server just responds to a request and doesn't care what the host value (or domain name for a lack of a better term) is as long as the request is received (e.g. Ember CLI, ASP.NET Server, Node.js). With Webpack Dev Server, I need to keep changing the host parameter when I switch from http://localhost:3000 to http://192.168.1.100:3000 for example.

[mummybot]

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. <script src="/build/bundle.sj"></script>. Check out the simple example link in my previous reply to see this in action.

In most dev environments, the server just responds to a request and doesn't care what the host value (or domain name for a lack of a better term)

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
    }
},

[johnnyoshika]

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:

• Development machine IP Address is 192.168.1.100
• Wants to test with a mobile device on http://192.168.1.100:3000

Developer 2:

• Development machine IP Address is 192.168.1.200
• Wants to test with a mobile device on http://192.168.1.200:3000
• Wants to also let external testers access the server via external IP address: http://123.123.123.123:3000

Designer:

• Has no idea what his IP address is and doesn't care.
• Wants to test on http://localhost:3000

So what we all end up doing is changing the host value in Webpack Dev Server to support our individual scenarios. We sometime even create custom domain mappings in our host file to support this. But of course we need to make sure we don't check in this change into source control, otherwise, we could break the environments of other developers (which has already happened many times). So every time we make a commit or pull from remote, we're constantly being reminded that we need to pay attention to the host parameter in Webpack Dev Server. Compare this to developing using Ember CLI. We just run our server and everything works. We never worry about setting the host value.

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!

[johnnyoshika]

@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 host problem (unless i misunderstood you). Thanks!

[mummybot]

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:

• Backend site is using Wordpress. HTML is generated by Wordpress and Webpack assets have to be included on page without host and port. This is served via an Apache Virtual host at http://mywpsite.dev
• Assets served by Webpack Dev Server at http://localhost:8080

<!-- 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 output.publicPath and devServer.contentBase (this is what I am stuck on at the moment) but you should find a scenario which works for you.

[sokra]

0.0.0.0 binds to all hosts

[johnnyoshika]

@sokra: wow, that's exactly what I was looking for. 0.0.0.0 is the catch-all host.

[mqliutie]

@sokra wow, amazing

[matteodem]

Would be extremely helpful to have that in the webpack docs.

[fweep]

0.0.0.0 worked in this case, and it works for most people, but there are legitimate reasons for binding to multiple specific hosts, rather than wildcard. I want to bind to multiple addresses for the same reason that @johnnyoshika wanted to bind to different addresses: testing from multiple machines on my LAN, and also from localhost. I'm going to use 0.0.0.0 as well, but I really don't want it binding to my public IP address. I'll firewall it off, but the right solution is to allow binding the multiple specific hosts. If I stick with webpack, I'll look into submitting a patch.

[AlennGK]

@mummybot thank you sir, this is awesome I am looking for this solution ages. ♥

(I don't know how, but my <links> are kinda strange, but working: http://localhost:8080/Z:/.../Devjs/app.bundle.js and my js files are in public not Dev)

[Cristy94]

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)

[kubatek94]

@Cristy94

I have following config and it works nicely behind reverse proxy:

devServer: { host: '0.0.0.0', port: '7654', hot: true, inline: true, disableHostCheck: true, public: '0.0.0.0:0' },

With such config, due to setting public to '0.0.0.0:0', it works because:

• hostname is overridden to use window location on this line:
  https://github.com/webpack/webpack-dev-server/blob/master/client-src/default/index.js#L182

• port is overridden to use window location port on this line:
  https://github.com/webpack/webpack-dev-server/blob/master/client-src/default/index.js#L42

[damianobarbati]

@sokra the ability to bind to multiple hosts enables advanced use cases:

• I have a webapp which is "templated" for multiple customers and server serves the correct bundle upon the requesting domain, if I want hot reload I need to mimic this behaviour in the webpack-dev-server
• each domain has its own certificates and I need to use SSL certs correctly: I can't disable SSL given the implication while developing with websockets/mobile/http2
• binding to all ports prevents me from having other webpack instances running for other projects (i.e: I have a react library which is built along and debugged on another page which handles forms, with its own demo page to quickly debug)

[srbin25]

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?

[jimhucksly]

is this topic closed without a solution?