Set up webpack to run locally on a custom domain over HTTPS

Question

In order to use a module I want to integrate into my application (I am developing locally), I have to do two things:
1) Make my application run locally on HTTPS.
2) Run the application with a specific domain.

Both of these things should be pretty easy with the Webpack dev server I am using for local development, but for some reason it is not working as the documentation suggests.

My webpack.config file is:

module.exports = {
  entry: './app/js/app.js',
  output: {
    path:'./app/js/',
    publicPath: 'https://specialurl.com/assets',
    filename:'bundle.js'
 }

The path I am pointing to has been added to my hosts file on my computer, so it should be just as valid as the localhost default.

And my package.json file has this as it's start script for the dev server:

"scripts": {
"start": "webpack-dev-server --progress --colors --https",
}

I made these changes and then I restarted with npm start after saving. The problem is that the server is still not running on https, and when I point my browser to the new link, it just shows nothing. All documentation that I have found makes it seem like this should work, so I must be missing something obvious.

Solution 1

Solved it! Turns out it's very very easy to do with Webpack as I expected, but the documentation is a little confusing.

You simply edit your host file to contain the domain you want, and then add the following code to your webpack.config:

 devServer: {
  host: "localhost.specialurl.com",
  port: 1234,
  https: true
},

Run npm start and point your browser to https://localhost.specialurl.com:1234/webpack-dev-server and you should be all set :)

Solution 2

To make this work with Hot Module Reloading, set the public value to undefined, and then it will use the value in host.

environment.config.devServer.public = undefined
environment.config.devServer.host = 'localhost.example.com'
environment.config.devServer.https = {
  https: true,
  hot: true,
  key: fs.readFileSync(path.resolve('ssl/localhost.example.com.key.pem')),
  cert: fs.readFileSync(path.resolve('ssl/localhost.example.com.cert.pem')),
}

This is because of this line, Which ignores the specified host, if public is defined: https://github.com/webpack/webpack-dev-server/blob/master/lib/utils/createDomain.js#L16