How to use SSL in localhost

There are lots of stuffs we need to test with SSL. There are some SSL providers that provide free SSL we can use those in our site. Among free SSL providers, I prefer to use CloudFlare, it’s very easy to use and nothing to setup though it needs ~24 hours to activate. Also, developers from countries where we don’t have super high speed internet, we are used to work in locally hosted site. So, usually we can’t use SSL in local site – in other words most of the developers doesn’t know. But it’s possible, and even it’s not complex at all!

SSL (Secure Sockets Layer) is the standard security technology for establishing an encrypted link between a web server and a browser. This link ensures that all data passed between the web server and browsers remain private and integral.

There are many ways to enable SSL in localhost, specially if you use MAMP PRO, then it is just a matter of couple clicks. Today, I will show you to use SSL in VVV. Just for your information, we are not buying any SSL certificate, it will be self signed certificate.

The self-signed SSL certificate is generated from the server.key private key and server.csr files. The server.crt file is your site certificate suitable for use with Heroku’s SSL add-on along with the server.key private key.

I assume you are already familiar with Vagrant and VVV. I am using a customized version of VVV in MAC OS, so the folder path could mismatch but that should not be any problem. I am also using VVV Site Creation Wizard to create and delete site with a couple of commands, it’s really very handy. It also creates vhost file in VVV disk and edit the host file in your OS. So, just command and start using the new site!

Let’s open the terminal and navigate to your vagrant directory and create a site:

It will ask you site name, domain, if it will be a single wp site or multisite etc, should take 2-3 mins. I assume, the domain you selected is sslsite.dev. Now. let’s navigate to nginx config folder and create SSL directory:

Now, we need to generate our self-signed cert and key file, let’s do it:

Add the cert and key file reference in the sslsite.dev configuration file:

You must replace vvv_path_to_folder with the correct folder path, it may vary. Below is the my configuration:

Easier to find if you just login at your vagrant using ssh and check the location. Now as the last step, run a single command:

We are all done, hurray!

We still have a small problem. When you run the site sslsite.dev (with https) the browser will show that the site is not trusted. To avoid this, let’s add the cert file into your keychain. Open your keychain access window, in left sidebar select “System” for keychains and select “Certificates” for category, like the following screenshot. Now just drag the cert file and drop into the right panel of the window.

You are completely all set. Start playing around with SSL in your local machine!

Happy New Year!