How to Create Valid SSL in localhost for XAMPP

Chrome browser updates has become a burden for local development. Not only they decided to disable .dev domain for local development, they also really have specific configuration in SSL Cert to show the site as secure.

In this step by step tutorial I will try to explain  the walk-through to create SSL cert locally to be used in XAMPP in Windows.

In my XAMPP install I basically  have a clone to all the site that I managed.  And All of them (of course) use SSL/HTTPS.

Here’s the step by  step guide:

In this step we are going to crate SSL and setup “site.test” website.

1. Navigate to Apache directory in XAMPP.

In regular install it’s in C:\xampp\apache.

2. Create a folder in that page.

This is where we will store our cert. In this example I will create “crt” folder. So we will have C:\xampp\apache\crt

3. Add this files.

4. Edit cert.conf and Run make-cert.bat

Change {{DOMAIN}} text using the domain we want to use, in this case site.test and save.

Double click the make-cert.bat and input the domain site.test when prompted. And just do enter in other question since we already set the default from cert.conf.

Note: I don’t know how to do text replace in .bat script, if you do, let me know in the comment how to do it and I will update make-cert.bat to automatically replace the {{DOMAIN}} with the domain input.

5. Install the cert in windows.

After that, you will see site.test folder created. In that folder we will have server.crt and server.key. This is our SSL certificate.

Double click on the server.crt to install it on Windows so Windows can trust it.

And then select Local Machine as Store Location.

And then Select “Place all certificate in the following store” and click browse and select Trusted Root Certification Authorities.

Click Next and Finish.

And now this cert is installed and trusted in Windows. Next is how how to use this cert in XAMPP.

6. Add the site in Windows hosts

  1. Open notepad as administrator.
  2. Edit C:\Windows\System32\drivers\etc\hosts (the file have no ext)
  3. Add this in a new line:
127.0.0.1 site.test

This will tell windows to load XAMPP when we visit http://site.test You can try and it will show XAMPP dashboard page.

7. Add the site in XAMPP conf.

We need to enable SSL for this domain and let XAMPP know where we store the SSL Cert. So we need to edit C:\xampp\apache\conf\extra\httpd-xampp.conf

And add this code at the bottom:

## site.test
 <VirtualHost *:80>
     DocumentRoot "C:/xampp/htdocs"
     ServerName site.test
     ServerAlias *.site.test
 </VirtualHost>
 <VirtualHost *:443>
     DocumentRoot "C:/xampp/htdocs"
     ServerName site.test
     ServerAlias *.site.test
     SSLEngine on
     SSLCertificateFile "crt/site.test/server.crt"
     SSLCertificateKeyFile "crt/site.test/server.key"
 </VirtualHost>

After that, you will need to restart Apache in XAMPP.  It’s very simple, simply open XAMPP Control Panel and Stop and re-Start Apache Module.

Tips: In XAMPP conf, as you can see you can change the domain root directory if needed. Eg. as sub-dir in htdocs.

8. Restart your browser and Done!

This is required to load the certificate. And visit the domain on your browser, and you will see green lock!

I hope this tutorial is useful!

If you already use other method, let me know in the comment 🙂

15 Comments

  1. Wolverine

    In step 7,

    1- I paste the code in httpd-xampp.conf
    2- then I stop the xampp (Apache)
    3- Then I start it (in this part the Apache does not work)

    now if I remove the code, the apache if it works but if I paste it again it stops working

    Is there anything else to do in this part?

    Thank you

    Reply
      • Ian

        That is correct. Google bought the .dev registry from ICANN Dec 2017 for their own internal use and closed down any external use of it.
        The alternatives are to use an undisputed TLD. .test .example and .localhost are all protected by ICANN, so one of those is the best option.

        We’re all in the same boat here.

        Reply
        • Drachsi

          Thank you very much. No wonder I was having problems, nobody but you mention that.
          Regards
          Drachsi

          Reply
  2. Yvon

    i Followed instructions, but my appach does not start anymore.
    it displayed
    11:04:24 [Apache] Status change detected: running
    11:04:25 [Apache] Status change detected: stopped
    11:04:25 [Apache] Error: Apache shutdown unexpectedly.
    11:04:25 [Apache] This may be due to a blocked port, missing dependencies,
    11:04:25 [Apache] improper privileges, a crash, or a shutdown by another method.
    11:04:25 [Apache] Press the Logs button to view error logs and check
    11:04:25 [Apache] the Windows Event Viewer for more clues
    11:04:25 [Apache] If you need more help, copy and post this
    11:04:25 [Apache] entire log window on the forums

    how can i fix it?

    Reply
  3. Ian

    Apache is missing dependencies possibly caused by trying to start before the certificate has been created
    Apache cannot find the path
    Access was denied.

    Was the SSl saved – check the directory. Is it there, is the path correct?
    If you rerun it, delete the previous directory.

    Hosts file – must be edited with elevated priviledges and save as host – not host .txt or any other extension.
    In the conf file, ensure the first module is port 80 and the second module is port 443. you still need port 80 to be there even though you are using SSL

    Do you have a .htaccess file in your root, it may be denying you. Add an Allow directive to both modules

    DocumentRoot “C:\xampp\htdocs\example.test”
    ServerName testsite.test

    Order allow,deny
    Allow from all

    DocumentRoot “C:\xampp\htdocs\example.test”
    ServerName example.test
    SSLEngine On
    SSLCertificateFile “C:/xampp/apache/crt/example.test/server.crt”
    SSLCertificateKeyFile “C:/xampp/apache/crt/example.test/server.key”

    Order allow,deny
    Allow from all

    Reply
  4. Ian

    Getting the not secure message but are you getting the green padlock? If it’s red you may have not completed a step.
    If it’s green It could be something as simple as cache needing a deep clean.
    What are you putting in the address bar and what is being returned.
    Are you calling for localhost/mysite.test where you should be requesting mysite.test.
    Try qualifying the url with the protocol by prefixing https://

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.