webpack-dev-server
webpack-dev-server copied to clipboard
webpack
listening as both https and http server simultaneously
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.
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.
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(...).
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.
For me - we need option to:
- run both server
- allow to redirect traffic from one to two (http -> https)
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.
+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."
Bump priority. it was a surprise to me that such a functionality is not out-of-the-box.
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.
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
}
} : {}
},
...
};
}
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.
