In this step-by-step guide, we will create an SSL certificate and configure the "insightgadgets.local" website.
Step 1: Access the Apache directory within XAMPP.
In a typical installation, you can find the Apache directory at "C:\xampp\apache".
This is the location where we will store our SSL certificate. In this example, I will create a folder named "crt" within the "apache" directory. Consequently, the full path to the folder will be "C:\xampp\apache\crt".
Download and copy these two files, cert.conf and make-cert.bat, into the folder "C:\xampp\apache\crt\".
Step 2: Edit cert.conf and Run make-cert.bat
Replace the placeholder text "{{DOMAIN}}" with the domain name you intend to use, which, in this case, is "insightgadgets.local". Save the changes to the file.
Next, double click on the "make-cert.bat" file. When prompted, input the domain "insightgadgets.local" as requested. For other questions, simply press "Enter" since we have already set the default values in the "cert.conf" file.
Step 3: Install the cert in windows
Once you've completed the previous steps, you will notice that a folder named "insightgadgets.local" has been created. Within this folder, you will find two important files: "server.crt" and "server.key." These files constitute our SSL certificate.
To ensure Windows trusts the certificate, simply double-click on the "server.crt" file, and the installation process will begin. This will enable Windows to recognize and trust the SSL certificate for your domain.
Next, choose "Local Machine" as the Store Location during the certificate installation process.
Following that, opt for "Place all certificates in the following store," click on "Browse," and choose "Trusted Root Certification Authorities" as the designated store for the certificate installation.
Click "Next" and then "Finish" to complete the certificate installation process in Windows. Now, the certificate is successfully installed and trusted on your Windows system. The next step involves understanding how to utilize this certificate in XAMPP.
Step 4: Add the site in Windows hosts
To add the site to the Windows hosts file, follow these steps:
Open File Explorer with administrative privileges. To do this, right-click on the File Explorer icon and choose "Run as administrator."
Navigate to the location "C:\Windows\System32\drivers\etc\". Find the file named "hosts" in the "etc" folder. Right-click on the "hosts" file and open it with a text editor that has administrative rights, such as Notepad with administrator privileges. At the end of the file, add a new line with the IP address followed by the domain name you want to use, like this:
127.0.0.1 insightgadgets.local
Replace "insightgadgets.local" with the domain name you used in the SSL certificate and save the changes you made to the hosts file.
By adding the site and associating it with the localhost IP address (127.0.0.1) in the hosts file, you can now access the site using the specified domain name in your web browser while testing it on your local server.
Step 5: Add the site in XAMPP conf
To include the site in XAMPP's configuration, follow these steps:
Navigate to the XAMPP installation directory. In a regular setup, this is typically located in "C:\xampp\". Find the "httpd-vhosts.conf" file, usually located at "C:\xampp\apache\conf\extra\httpd-vhosts.conf". Open the "httpd-vhosts.conf" file with a text editor. Add a new VirtualHost block to configure the site. The format is as follows:
## insightgadgets.local
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/path-to-your-site-folder"
ServerName insightgadgets.local
ServerAlias *.insightgadgets.local
</VirtualHost>
<VirtualHost *:443>
DocumentRoot "C:/xampp/htdocs/path-to-your-site-folder"
ServerName insightgadgets.local
ServerAlias *.insightgadgets.local
SSLEngine on
SSLCertificateFile "crt/insightgadgets.local/server.crt"
SSLCertificateKeyFile "crt/insightgadgets.local/server.key"
</VirtualHost>
Replace "insightgadgets.local" with your domain name, and "C:/xampp/htdocs/path-to-your-site-folder" with the actual path to your website's folder and save the changes made to the "httpd-vhosts.conf" file.
Restart the Apache server in XAMPP to apply the changes. You can do this through the XAMPP control panel by stopping and then starting the Apache service.
By adding the site to the "httpd-vhosts.conf" file, you are configuring XAMPP to serve the specified website when accessed through the domain name "insightgadgets.local" on your local server.
Step 6: Restart your web browser, and you're all set!
The changes and configurations you made are now in effect, and you can access your website locally using the domain name you specified (e.g., "insightgadgets.local") in your browser. Enjoy testing your website on your XAMPP server!
