{"id":4215,"date":"2017-09-05T15:42:54","date_gmt":"2017-09-05T13:42:54","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=4215"},"modified":"2020-02-09T10:59:44","modified_gmt":"2020-02-09T09:59:44","slug":"https-virtual-hosts-xampp","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/https-virtual-hosts-xampp-4215\/","title":{"rendered":"HTTPS with virtual hosts on XAMPP"},"content":{"rendered":"\n

Until now, I never used HTTPS for local development domains. Now I had to use it for a project, and here is how to get it working on XAMPP with virtual hosts.<\/p>\n\n\n\n\n\n\n\n

\n

Update from May 31, 2018:<\/strong> Before the update, I described the creation of an SSL certificate as the first necessary step before setting up the virtual host. But your browser will display a warning regardless if there is a self-created cert or not, so I removed this part. You need to add your local site as an exception to not get the warning every time.<\/p>\n

Update from June 1, 2018:<\/strong> Seems that you need the cert file, otherwise apache will not start, so I added this part back to the post.<\/p>\n<\/div>\n\n\n\n

Two steps are necessary for the solution:<\/p>\n\n\n\n

  1. Creating an SSL certificate.<\/li>
  2. Set up the virtual host.<\/li><\/ol>\n\n\n\n

    The requirement is (of course) XAMPP.<\/p>\n\n\n\n

    Creating an SSL certificate<\/h2>\n\n\n\n

    A good tutorial about creating a cert is on robsnotebook.com<\/a>. It is from 2007, but works. To create a certificate, you can follow these steps on the command line:<\/p>\n\n\n\n

    1. Go to the Apache directory C:\\xampp\\apache<\/code>.<\/li>
    2. Run makecert<\/code>.<\/li>
    3. Enter a PEM passphrase and the other information you are asked for. For Common Name<\/em>, you should enter the domain you want to use for the virtual host, so the certificate is signed for that domain.<\/li>
    4. After processing all steps, you maybe want to import the cert into your browser (it lives under C:\/xampp\/apache\/conf\/ssl.crt\/server.crt<\/code>). Nevertheless, you will get a warning about insecure self-signed certificate after loading your website \u2013 you need to add it as an exception.<\/li><\/ol>\n\n\n\n

      Set up virtual host with HTTPS<\/h2>\n\n\n\n

      Entry in the Windows hosts file<\/h3>\n\n\n\n

      To let Windows know, for example, that the domain florianbrinkmann.test<\/code> should point to the IP address 127.0.0.1<\/code> (localhost), we have to insert an entry in the Windows hosts<\/code> file. The file can be found in C:\\Windows\\System32\\drivers\\etc<\/code>. To edit it, you need admin privileges (search for the editor in Windows, right-click on it and choose Run as administrator<\/em>).<\/p>\n\n\n\n

      At the end of the hosts<\/code> file, add an entry with the following pattern:<\/p>\n\n\n

      127.0<\/span>.0<\/span>.1<\/span> florianbrinkmann<\/span>.test<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      You have to replace the domain with your own development domain. Afterwards, you can save and close the file.<\/p>\n\n\n\n
      Creating the Virtual Host in Apache<\/h3>\n\n\n\n
      The virtual hosts in Apache can be found in the C:\\xampp\\apache\\conf\\extra\\httpd-vhosts.conf<\/code> file. Open the file and insert an entry according to the following pattern (an answer from stackoverflow.com<\/a> was very helpful \u2013 the related question also, it brought me to the article on SSL certificate setup):<\/p>\n\n\n
      <VirtualHost<\/span> florianbrinkmann.test:80<\/span>><\/span>\n\tDocumentRoot \"C:\\xampp\\htdocs\\florianbrinkmann.test\"\n\tServerName florianbrinkmann.test\n\t<Directory<\/span> \"C:<\/span>\\xampp<\/span>\\htdocs<\/span>\\florianbrinkmann.test<\/span>\"><\/span>\n\tOrder allow,deny\n\tAllow from all\n\t<\/Directory<\/span>><\/span>\n<\/VirtualHost<\/span>><\/span>\n\n<VirtualHost<\/span> florianbrinkmann.test:443<\/span>><\/span>\n\tDocumentRoot \"C:\\xampp\\htdocs\\florianbrinkmann.test\"\n\tServerName florianbrinkmann.test\n\tSSLEngine On\n\tSSLCertificateFile \"C:\/xampp\/apache\/conf\/ssl.crt\/server.crt\"\n\tSSLCertificateKeyFile \"C:\/xampp\/apache\/conf\/ssl.key\/server.key\"\n\t<Directory<\/span> \"C:<\/span>\\xampp<\/span>\\htdocs<\/span>\\florianbrinkmann.test<\/span>\"><\/span>\n\tOrder allow,deny\n\tAllow from all\n\t<\/Directory<\/span>><\/span>\n<\/VirtualHost<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      Here you have to adjust the settings for DocumentRoot<\/code>, ServerName<\/code>, Directory<\/code>, and the domain in the VirtualHost<\/code> element. The first VirtualHost<\/code> is for HTTP connections, the second for HTTPS connections.<\/p>\n\n\n\n
      Maybe you have to uncomment the following line in the C:\\xampp\\apache\\conf\\httpd.conf<\/code>:<\/p>\n\n\n
      LoadModule ssl_module modules\/mod_ssl.so<\/code><\/span><\/pre>\n\n\n
      Now you can restart Apache and open your site with HTTPS (including browser warning\u2026).<\/p>\n","protected":false},"excerpt":{"rendered":"
      Until now, I never used HTTPS for local development domains. Now I had to use it for a project, and here is how to get it working on XAMPP with virtual hosts.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-4215","post","type-post","status-publish","format-standard","hentry","category-tips"],"wp-worthy-pixel":{"ignored":false,"public":"687797c2f5b449c08e02c5174c6a5541","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/687797c2f5b449c08e02c5174c6a5541"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=4215"}],"version-history":[{"count":6,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4215\/revisions"}],"predecessor-version":[{"id":5852,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4215\/revisions\/5852"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=4215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=4215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=4215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}