DEV Community

Mehmet Sefa
Mehmet Sefa

Posted on

How to enable https on your local environment

In today's internet, using https protocol is a standard for sites. What about your local environment? Do you develop sites using https protocol on your local environment? If your answer is no, here is how to enable https on your local environment (e.g localhost).

Understanding http and https protocols are core parts of developing software, if you feel unsecure when you think about http and https (maybe the concept of computer networking?), you should learn it well to develop top quality web software. I recommend this book.

We will generate self signed certificates and use nginx to establish https connection

Generate certificates

brew install mkcert
Enter fullscreen mode Exit fullscreen mode
mkcert -install
Enter fullscreen mode Exit fullscreen mode
mkcert local.place-your-domain-here.com localhost 127.0.0.1 ::1
Enter fullscreen mode Exit fullscreen mode

Two .pem files will be generated. rename them as domain.pem and domain-key.pem

Add 127.0.0.1 local.place-your-domain-here.com to your /private/etc/hosts file

Install nginx and create nginx config file

brew install nginx

create nginx.conf file and paste the following in it

events {

}

http {
  server {
    listen 443 ssl;
    listen [::]:443 ssl;
    ssl_certificate ~/domain.pem;
    ssl_certificate_key ~/domain-key.pem;
    server_name local.place-your-domain-here.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

With this config, nginx will accept https connection on port 43 and proxy it to port 3000, you can change 3000 on the config file to whatever port your app runs.

Run nginx

nginx -c ./nginx.conf -p .
Enter fullscreen mode Exit fullscreen mode

now you can open https://local.place-your-domain-here.com

Discussion (0)