listening as both https and http server simultaneously

[kwindla]

Hi,

I'm moving a project over from browserify to webpack and hit a snag this afternoon. For arcane reasons (involving chrome and atom-shell/chromium behaviors) I need both https and http instances of local dev/testing web servers.

webpack-dev-server is awesome, but I didn't find any directly supported way to instantiate on two ports at the same time.

Here's what I ended up doing (full code context, farther down below)...

webpack_dev_server.listen(8004);
http.createServer(webpack_dev_server.app).listen (8005);

I'd like to ask whether this is a reasonable solution, or whether there's a better thing I should be doing, or alternatively whether a pull request to implement simultaneous https/http at the API level would be welcome.

Below, the full gulpfile.js chunk ...

var webpack = require ("webpack");
var WebpackDevServer = require ("webpack-dev-server");
var webpackConfig = require ("./webpack.config.js");
var http = require ('http');

gulp.task ("webpack-dev-server", function (callback) {
    // modify some webpack config options
    var myConfig = Object.create (webpackConfig);
    myConfig.devtool = "#source-map";
    myConfig.debug = true;

    // Start a webpack-dev-server
    var wds = new WebpackDevServer (webpack(myConfig), {
    https: true,
        publicPath: "/web",    // +   myConfig.output.publicPath,
        stats: {
            colors: true
        }
    });
  wds.listen(8004);
  http.createServer(wds.app).listen (8005);
});

Thank you.

[sokra]

Glad you found a solution, but I think the use case is too rar to add options for this to the webpack-dev-server. Even without accessing internals you could start a proxy server.

[tommedema]

I would like to see this actually. For the command line especially.

[mzedeler]

Does this also work with websockets?
I'm constantly getting http 404 for http://localhost:3001/sockjs-node/info?t=<...> when i use http.createServer(wds.app).listen(...).

[Jokero]

This is actually not so rare situation 👍 I need also both http and https

[Jokero]

Redirect from http to https also would be ok

[kitsunekyo]

bump. i always need both environments.
is this possible yet?

[Jokero]

@sokra Looks like this is not rare situation 😃

[jasonjiflyer]

This is really not rare situation

[ehausen]

I would also need both!

[michaelhartmayer]

Yes please.

[jayarjo]

We need this!

[everscending]

I need this as well. Bump!

[anandchakru]

another +1 for this..

[kmukthi]

So a trick would be to configure nginx and open the port 80 to reroute to the actual ssecure locatio. Something like the following in your nginx configuration
server { listen 80; return 301 https://www.example.com$request_uri; }

This works for me, but I would like to know If i can remove the dependency on nginx and only configure web pack.
Thanks.

[alexander-akait]

For me - we need option to:

• run both server
• allow to redirect traffic from one to two (http -> https)

[rightaway]

Having the option to redirect http to https would be quite helpful. Now I have to always add the https to the beginning of my development links in the browser.

[natkuhn]

+1. I am using this to test development of an app to communicate with people who are not technically sophisticated. Easier to get them to type "devsite.com" into address bar than "https://devsite.com."

[extempl]

Bump priority. it was a surprise to me that such a functionality is not out-of-the-box.

[taylorgoolsby]

Now that Chrome is blocking third party cookies unless they are secure, I think this feature is more important for developer experience since it will become more common for devs to have a need for https during dev.

[kamilic]

Bump priority. We NEED this feature.

[sandorvasas]

still need it

[ruojianll]

I need it.

[alexander-akait]

PR welcome, we can start 2 servers

[flavianh]

Need this too

[pedrettin]

I consider this a hack, so i still think a proper webpack property to allow redirect is needed, but here is a solution only using webpack and without having to spin up another local server frontend by nginx.

Basic idea: spin up 2 webpack dev servers, 1 listening on http one on https. Have the one listening on http implement a proxy to redirect to https.

// package.json

"server": "webpack serve --config webpack.config.js --env https=false & webpack serve --config webpack.config.js --env https=true",

// webpack.config.js

module.exports = (env) => {
	return {
		....
		devServer: {
			https: env && env.https === "true",
			...
			port: env && env.https === "true" ? 443 : 80,
			...
			proxy: !env || env.https === "false" ? {
				"/**": {
					target: "https://localhost",
					secure: false, // allows the https server to not have a proper certificate
				}
			} : {}
		},
		...
	};

}

[alexander-akait]

Why you need HTTPS on dev env? Due http2/http3 support?

[pedrettin]

I am guessing there are multiple use cases, but we need it to communicated with the auth service which does not do CORS with non https services.

[alexander-akait]

Why not use HTTPs and self signed certificate?

[pedrettin]

that's what we do

[hieuzeta]

I also need to serve both http and https, any progress on this thread ?