DEV Community

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

Posted on • Edited on

8 1

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
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)

Heroku

Amplify your impact where it matters most — building exceptional apps.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (1)

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

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

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay