Webpack Dev Server running on HTTPS/Web Sockets Secure

Question

Normally in developer mode Webpack runs using HTTP. There is usually a web server serving content through HTTP and webpack using http/websockets on a separate port.

Answer 1

With webpack-dev-server --https you create a self-signed certificate. But it works not for all use cases.

Browsers will ask you for a security exception and show in the url bar that connection is not secure.

Therefore it is recommended to create a locally trusted development certificate for localhost with mkcert

Then use it via CLI:

webpack-dev-server --https --key C:/Users/User/localhost-key.pem --cert C:/Users/User/localhost.pem --cacert C:/Users/User/AppData/Local/mkcert/rootCA.pem

or configure devServer.https option in webpack.config.js:

devServer: {
    https: {
        key: fs.readFileSync('C:/Users/User/localhost-key.pem'),
        cert: fs.readFileSync('C:/Users/User/localhost.pem'),
        ca: fs.readFileSync('C:/Users/User/AppData/Local/mkcert/rootCA.pem')
    }
}

mkcert creates .pem files in Unix format by default. So if you're on Windows you'll probably need convert them to Windows format using e.g. Notepad++