Virtual Host Configuration for Opencart on Xampp

Creating a Virtual Host for Opencart on Xampp and Windows.

Let's explore a few options for running Opencart on a local Xampp server.

Option 1: Everything works fine on localhost.

After installing Xampp, the website folders are located in xampp\htdocs.

In our example, we have a folder named ocstore3037 which contains a clean installation of ocStore 3.0.3.7.

If you start the Xampp server for the first time, our project will be accessible at: http://localhost/ocstore3037/

Verify that the website is functioning properly. If Opencart and its components are working correctly, no further action is required.

Option 2: Issues arise with Opencart on localhost

One common issue is that SEO URLs don't work. We have previously described how to fix this in detail.

Another issue is that some modules require the site's URL to be without "localhost" for proper functionality. Otherwise, when you open the module settings page, it will give a 404 error (page not found).

To address these issues, you need to host the site on a virtual server.

Here's how to create a virtual host on Xampp.

1. Open the file C:\xampp\apache\conf\extra\httpd-vhosts.conf, and scroll to the bottom. Insert the following code:

<VirtualHost *:80> 
    DocumentRoot "C:/Mega/xampp/htdocs/ocstore3037" 
    ServerName ocstore3037.loc 
</VirtualHost>

DocumentRoot - Path to the folder containing the Opencart website on Xampp,

ocstore3037 - Name of the Opencart website folder

ocstore3037.loc - Address through which the website will be accessible: This address can be any of your choosing. However, it is advisable to avoid addresses that are already in use on the internet. This is because the browser may redirect to existing websites instead of opening the local project. To avoid this, you may need to disable the internet connection each time you want to run the project.

2. Let's go to the file C:\Windows\System32\drivers\etc\hosts

First, let's make a backup of the file, for example, by naming it "hosts_bak".

In Windows, editing the hosts file in its current location may require administrator privileges. Therefore, let's copy it to the Desktop for editing.

Open the "hosts" file and you will see a line

#   127.0.0.1       localhost

Copy it and paste it at the bottom of the file. Remove the hash symbol "#" from the line

127.0.0.1       localhost

127.0.0.1 - the local address of the computer may be different.

Below that, insert the value of "ServerName" from the previous file

127.0.0.1       ocstore3037.loc

Save the file. Copy it and replace the original file in C:\Windows\System32\drivers\etc\

Done! We have added a virtual host for "ocstore3037.loc". If you have multiple projects, you can add multiple virtual hosts. The number of virtual hosts is not limited.

Let's configure Opencart 3 to work on the virtual host.

In the folder C:/Mega/xampp/htdocs/ocstore3037, open the files config.php and admin/config.php

Remove "localhost" from the URLs and ".loc" from the file paths.

In config.php:

<?php 
// HTTP 
define('HTTP_SERVER', 'http://localhost/ocstore3037.loc/'); 
// HTTPS 
define('HTTPS_SERVER', 'http://localhost/ocstore3037.loc/'); 
// DIR 
define('DIR_APPLICATION', 'C:/Mega/xampp/htdocs/ocstore3037.loc/catalog/'); 
define('DIR_SYSTEM', 'C:/Mega/xampp/htdocs/ocstore3037.loc/system/'); 
define('DIR_IMAGE', 'C:/Mega/xampp/htdocs/ocstore3037.loc/image/');

Replace with:

<?php
// HTTP
define('HTTP_SERVER', 'http://ocstore3037.loc/');
// HTTPS
define('HTTPS_SERVER', 'http://ocstore3037.loc/');
// DIR
define('DIR_APPLICATION', 'C:/Mega/xampp/htdocs/ocstore3037/catalog/');
define('DIR_SYSTEM', 'C:/Mega/xampp/htdocs/ocstore3037/system/');
define('DIR_IMAGE', 'C:/Mega/xampp/htdocs/ocstore3037/image/');

In admin/config.php

<?php
// HTTP
define('HTTP_SERVER', 'http://localhost/ocstore3037.loc/admin/');
define('HTTP_CATALOG', 'http://localhost/ocstore3037.loc/');
// HTTPS
define('HTTPS_SERVER', 'http://localhost/ocstore3037.loc/admin/');
define('HTTPS_CATALOG', 'http://localhost/ocstore3037.loc/');
// DIR
define('DIR_APPLICATION', 'C:/Mega/xampp/htdocs/ocstore3037.loc/admin/');
define('DIR_SYSTEM', 'C:/Mega/xampp/htdocs/ocstore3037.loc/system/');
define('DIR_IMAGE', 'C:/Mega/xampp/htdocs/ocstore3037.loc/image/');
define('DIR_STORAGE', DIR_SYSTEM . 'storage/');
define('DIR_CATALOG', 'C:/Mega/xampp/htdocs/ocstore3037.loc/catalog/');

Replace with:

<?php
// HTTP
define('HTTP_SERVER', 'http://ocstore3037.loc/admin/');
define('HTTP_CATALOG', 'http://ocstore3037.loc/');
// HTTPS
define('HTTPS_SERVER', 'http://ocstore3037.loc/admin/');
define('HTTPS_CATALOG', 'http://ocstore3037.loc/');
// DIR
define('DIR_APPLICATION', 'C:/Mega/xampp/htdocs/ocstore3037/admin/');
define('DIR_SYSTEM', 'C:/Mega/xampp/htdocs/ocstore3037/system/');
define('DIR_IMAGE', 'C:/Mega/xampp/htdocs/ocstore3037/image/');
define('DIR_STORAGE', DIR_SYSTEM . 'storage/');
define('DIR_CATALOG', 'C:/Mega/xampp/htdocs/ocstore3037/catalog/');

If you have previously used this method to configure SEO URLs, you need to edit the .htaccess file.

RewriteBase /ocstore3037.loc/

Replace with:

RewriteBase /

Result

Restart Apache and MySQL

Done. Now the website can be accessed through the new address http://ocstore3037.loc/