How to set up HTTPS on localhost or local server made simple

I didn’t think that there will be a time where websites would be saying if you don’t have a website that is not on HTTPS server then you may not be able to use our services. So, I experienced that myself and you too will experience that at one point or the other as you go in your Web Development journey.

I thank God for the OpenSSL project that has provided us with this powerful tool to be able to achieve this task. So, without further ado, let's get started.

Any version of WampServer can be used in this setup.

Today, we are going to learn how to set up HTTPS on your localhost. Let me tell you briefly why I am recording this video. I wanted to integrate a payment gateway into my website, and I needed to test it on my localhost before going live. The company website requires that the test be done on an HTTPS website, so I started looking for guides. Most of the guides I found were not comprehensive enough, and some did not zoom for proper viewing. Then, fortunately, I came across a guide that gave me 80% of the understanding, and I decided to record this video to give you 100% understanding and clarity. So, without further ado, let's get started.

You may like to watch the video below or follow the step-by-step approach:

1. Go to WampServer website and download and install it. You can click here to do that.
2. OpenSSL can be used on Command Prompt to create the SSL certificate and private key. You can get it for win 32 and 64. Download the version based on your system here. On the download page, scroll down to the section as shown in the image below:
3. Let's create a Private Key, click Start button on your computer, type cmd or comm, right-click on Command Prompt and select Run as administrator. While the Command Prompt is still opened, go to the location you installed the OpenSSL, copy the line below and paste if the location is the same as yours and click Enter line to copy: cd C:\Program Files\OpenSSL-Win64\bin

   Create a private key by copying and pasting each of the lines below and clicking Enter key each time you copy and paste, when asked for pass phrase, it can be any number of characters you like, e.g., 1234:

   openssl genrsa -aes256 -out private.key 2048

   openssl rsa -in private.key -out private.key 

4. Let's create an SSL Certificate by entering following command on the Command Prompt, read and answer any questions being asked, see image below as sample: this is line to copy: openssl req -new -x509 -nodes -sha1 -key private.key -out certificate.crt -days 36500
5. Now, we are moving/cutting the Private Key and the Certificate files, which are certificate.crt and private.key created in this location: C:\Program Files\OpenSSL-Win64\bin. See steps 3 and 4 above. Create a new folder with related name called ssl in your server location, e.g.: C:\wamp\bin\apache\apache2.4.9\conf, then paste those two files you copied into the ssl folder.
6. Let’s configure the httpd.conf file, go to C:\wamp\bin\apache\apache2.4.9\conf\httpd.conf (depending on your WampServer installed drive), open the httpd.conf file with any text editor of choice, uncomment that is, remove the hash # symbol behind each of the 3 lines below, you copy each line, then Ctr+F to find: line 1: LoadModule ssl_module modules/mod_ssl.so        line 2:  Include conf/extra/httpd-ssl.conf         line 3:    LoadModule socache_shmcb_module modules/mod_socache_shmcb.so              Save the file or press Ctr+S when you are done.
7. Next, configure the httpd-ssl.conf file, go to C:\wamp\bin\apache\apache2.4.9\conf \extra\httpd-ssl.conf, open file with any text editor, add the lines below if they don't exist or modify if they exist, you copy first word on each line, then Ctr+F to find, replace each path/location that relates to your system, e.g., c:/wamp/, c:/wamp/bin/apache/apache2.4.9 etc.

8. Copy and search each line:

   DocumentRoot "c:/wamp/www"

   ServerName localhost:443

   ServerAdmin admin@example.com

   SSLCertificateKeyFile "c:/wamp/bin/apache/apache2.4.9/conf/ssl/private.key"

   SSLCertificateFile "c:/wamp/bin/apache/apache2.4.9/conf/conf/ssl/certificate.crt"

   SSLSessionCache "shmcb:c:/wamp/bin/apache/apache2.4.9/logs/ssl_scache(512000)"

   CustomLog "c:/wamp/bin/apache/apache2.4.9/logs/ssl_request.log" \

             "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"                   >  Save the file or press Ctr+S when you are done.

9. Last but not least, restart the WampServer, if the icon turns green, then everything is OK. If the icon turns orange or red, there is a problem with your server configuration somewhere. Check for any syntax errors by going to this location on your Command Prompt: C:\wamp\bin\apache\apache2.4.9\bin and run this command: httpd -t if it shows errors, go through the errors and fix them but if it shows Syntax OK, then you are done.
   Test what you have done by going to https://localhost or https://127.0.0.1 on your browser software, if a warning page appears, then see the steps in the image below to fix it.
10. 

If you find this post useful, help me smash the like button, comment, share with your friends, and you can also share your content on this website by registering free here. Thanks, and take care!

Check link below to download PDF of this post