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 reading following book:

HTTP: The Definitive Guide (Definitive Guides)

HTTP: The Definitive Guide (Definitive Guides) [Gourley, David, Totty, Brian, Sayer, Marjorie, Aggarwal, Anshu, Reddy, Sailu] on Amazon.com. *FREE* shipping on qualifying offers. HTTP: The Definitive Guide (Definitive Guides)

https://amzn.to/43YVsOg

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

Generate certificates


brew install mkcert


mkcert -install


mkcert local.place-your-domain-here.com localhost 127.0.0.1 ::1

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;
    }
  }
}

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 .

now you can open `https://local.place-your-domain-here.com` in the browser and see it works.