Use HTTPS with webpack dev server

Photo by Taylor Vick on Unsplash

There are times when you need to use HTTPS locally when developing with webpack. For example, you could be developing a Chrome extension using the webpack dev server to hot reload when you make changes. The challenge is that your content scripts will not load on HTTPS sites and you will get an error that reads like the snippet below.

Webpack-Dev-Server constructs improper SockJS: "An insecure SockJS connection may not be initiated from a page loaded over HTTPS"

The solution is to create a local Certificate Authority(CA) in your system root. You can use mkcert to generate the CA as shown below

Install mkcert on macOS using Homebrew

For other operating systems, please have a look at the mkcert installation guide here.

brew install mkcert

Run the mkcert command to create a new local CA

mkcert -install

Run the command below to generate a certificate for the host you are using locally, e.g localhost

mkcert localhost 127.0.0.1

The command will output the name of the files generated in the terminal. Below is an example of such an output

The certificate is at "./example.com+5.pem" and the key at "./example.com+5-key.pem" ✅

Update webpack config

You should then go back to your webpack dev server and add the following config to use the generated files

https: {
      key: readFileSync('path-to-/+1-key.pem')),
      cert: readFileSync('path-to/+1.pem>')),
      ca: readFileSync('path-to/rootCA.pem')),
    }

You can locate the path of you rootCA.pem file by running the command below

mkcert -CAROOT

App in the broswer

With all the changes applied, start your webpack dev server and navigate to your browser and open your localhost and you will that the site will be secure as shown below.

I hope you enjoyed reading this piece!