Running Webpack Dev Server with HTTPS on developer machine using MKCERT

#webpack #https #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)

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more