DEV Community

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

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode

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" ✅
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'), } },
Enter fullscreen mode Exit fullscreen mode

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)

Top comments (1)

Collapse
 
grawl profile image
Даниил Пронин •

this note is copied from my gist gist.github.com/Grawl/bd0096b49276...