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.

Noe

Why not just put an nginx server in front of webpack, set up with certs, and edit your hosts file to point the domain at the nginx? – Hanselka

Because it seems like webpack has all the capabilities needed, so I'd like to keep things streamlined if possible. If not that does seem like a good idea to try :) – Noe

Just saying - this is pretty easy with a Node server, which I prefer even in development because it is more scalable and flexible – Foolscap

Answer 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 :)

Noe

any luck getting this to work with hot:true? the app works on the custom domain but webpack keeps trying to open a socket.io connection to localhost:3000 instead. – Sorehead

how did you edit your hosts file? 127.0.0.1 localhost.specialurl.com ? – Municipalize

Yes, it is necessary to add 127.0.0.1 localhost.specialurl.com to get this to work – Preterition

You can also do 127.0.0.1 localhost localhost.specialurl.com so that localhost also keeps working. – Stratum

adding 127.0.0.1 localhost localhost.specialurl.com to my windows host file works. Another way is that if you have control of the domain you can add A record to the domain and point the localhost.specialurl.com to a IP address 127.0.0.1. For example, if you ping localhost.huawei.com it's resolved to 127.0.0.1. – Franciscafranciscan

https or secure field seem not supported by webpack config ? – Hermilahermina

Answer 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

Dragonfly

Answer 3

For those who may have fought with this as I did. I had to set requestCert: false while the webpack doc gives an example with requestCert: true:

devServer: {
    host: 'mydomain.com',
    allowedHosts: 'all',
    server: {
        type: 'https',
        options: {
            key: path.join(__dirname, './file.key'),
            cert: path.join(__dirname, './file.crt'),
            requestCert: false,
        },
    },
    port: 9000
}

Chemiluminescence