Running Webpack Dev Server with HTTPS on developer machine using MKCERT

webpack-https-mkcert.md

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)