Running Webpack Dev Server with HTTPS on developer machine using MKCERT

1) Add local domain to /etc/hosts:

127.0.0.1 my-project.dev

2) Install mkcert
3) Create certificate for this domain:

➜ mkcert my-project.dev

Created a new certificate valid for the following names 📜
 - "my-project.dev"

The certificate is at "./my-project.dev.pem" and the key at "./my-project.dev-key.pem" ✅

4) Copy certificate .dev.pem and the key .dev-key.pem to project folder:

cp my-project.dev.pem path/to/my-project
cp my-project.dev-key.pem path/to/my-project

5) Add HTTPS options to Webpack Dev Server config:

devServer: {
    host: 'my-project.dev',
    https: {
        key: fs.readFileSync('./my-project.dev-key.pem'),
        cert: fs.readFileSync('./my-project.dev.pem'),
    }
},

Tested with:

webpack 4.28.4

webpack-dev-server 3.2.1

@vue/cli-service 3.5.3

mkcert 1.3.0 from Homebrew

macOS Mojave 10.14.6 (18G84)

Blog

Running Webpack Dev Server with HTTPS on developer machine using MKCERT

Даниил Пронин

Join Our Newsletter. No Spam, Only the good stuff.

Related