How to Configure a Virtual Host in XAMPP with CodeIgniter 4: A Step-by-Step Tutorial

By /

If you’re a PHP developer working with CodeIgniter 4, setting up a virtual host in XAMPP can make your local development experience smoother and more professional. Instead of accessing your project via http://localhost/your-project/public, you can use a custom domain like http://myproject.local. This not only looks cleaner but also mimics a real-world server setup. In this tutorial, I’ll walk you through the process of configuring a virtual host in XAMPP for a CodeIgniter 4 project on Windows. Let’s get started!

Prerequisites

Before we dive in, ensure you have the following:

  • XAMPP installed on your Windows machine (I’m using XAMPP with PHP 7.4 or higher, as CodeIgniter 4 requires PHP 7.4+).
  • CodeIgniter 4 project set up. If you haven’t installed it yet, you can do so via Composer with this command in your XAMPP htdocs folder:
    composer create-project codeigniter4/appstarter myproject
  • Basic familiarity with editing configuration files.

Step 1: Set Up Your CodeIgniter 4 Project

Assuming you’ve installed CodeIgniter 4, your project folder (e.g., myproject) should be inside C:\xampp\htdocs. Inside this folder, you’ll notice a public directory—this is the web root for CodeIgniter 4, where all publicly accessible files live. Our virtual host will point to this public folder, not the project root, for security and proper routing.

For this tutorial, let’s assume your project is located at C:\xampp\htdocs\myproject.

Step 2: Configure the Apache Virtual Host

XAMPP uses Apache as its web server, and we’ll configure a virtual host by editing the httpd-vhosts.conf file. Follow these steps:

  1. Locate the Configuration File
    Open File Explorer and navigate to C:\xampp\apache\conf\extra. Find the file named httpd-vhosts.conf. This is where we define virtual hosts.
  2. Open the File
    Right-click httpd-vhosts.conf and open it with a text editor like Notepad or VS Code. You might need to run the editor as an administrator to save changes.
  3. Add Your Virtual Host
    At the bottom of the file, add the following configuration. Replace myproject.local with your desired domain and adjust the path to match your project’s location:
    <VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/myproject/public"
    ServerName myproject.local
    <Directory "C:/xampp/htdocs/myproject/public">
    AllowOverride All
    Require all granted
    </Directory>
    </VirtualHost>
    • DocumentRoot: Points to the public folder of your CodeIgniter 4 project.
    • ServerName: The custom domain you’ll use (e.g., myproject.local).
    • AllowOverride All: Enables .htaccess usage, which CodeIgniter 4 relies on for URL rewriting.
    • Require all granted: Allows access to the directory.
  4. Save the File
    Save your changes and close the editor.

Step 3: Update the Hosts File

Windows uses a hosts file to map custom domains to your local machine (127.0.0.1). Here’s how to edit it:

  1. Locate the Hosts File
    Go to C:\Windows\System32\drivers\etc. Find the hosts file (it has no extension).
  2. Edit the File
    Right-click hosts, open it with Notepad, and run as administrator. At the bottom, add this line:
    127.0.0.1 myproject.local
    This tells your system that myproject.local should resolve to your local machine.
  3. Save and Close
    Save the file and exit.

Step 4: Enable Apache Rewrite Module (Optional)

CodeIgniter 4 uses clean URLs (e.g., myproject.local/about instead of myproject.local/index.php/about). For this to work, Apache’s mod_rewrite must be enabled:

  1. Open C:\xampp\apache\conf\httpd.conf in a text editor.
  2. Search for this line: textCollapseWrapCopy#LoadModule rewrite_module modules/mod_rewrite.so
  3. Remove the # to uncomment it, so it looks like: textCollapseWrapCopyLoadModule rewrite_module modules/mod_rewrite.so
  4. Save and close the file.

The default .htaccess file in CodeIgniter 4’s public folder should already handle URL rewriting, so no further changes are needed there.

Step 5: Update CodeIgniter’s Base URL and Remove index.php

CodeIgniter 4 needs to know the base URL of your app, and we’ll also configure it to remove index.php from URLs for a cleaner look. Edit the app/Config/App.php file in your project:

  1. Open C:\xampp\htdocs\myproject\app\Config\App.php.
  2. Find the $baseURL property and set it to your virtual host domain:
    public $baseURL = 'http://myproject.local/';
    Ensure it ends with a trailing slash.
  3. To remove index.php from URLs, find this line:
    public $indexPage = 'index.php';
    Change it to:
    public $indexPage = '';
    This tells CodeIgniter to omit index.php from the URL, relying on the .htaccess file and mod_rewrite to handle routing.
  4. Save the file.

Alternatively, you can set these in the .env file (in the project root). Uncomment and update:

app.baseURL = 'http://myproject.local/' app.indexPage = ''

Step 6: Restart Apache

For the changes to take effect, restart Apache:

  1. Open the XAMPP Control Panel.
  2. Stop the Apache service, then start it again.

Step 7: Test Your Virtual Host

Open your browser and type http://myproject.local. If everything is set up correctly, you should see the CodeIgniter 4 welcome page! Try navigating to a route like http://myproject.local/about (assuming you’ve created an About controller) to confirm URL rewriting works.

Troubleshooting Tips

  • “Page Not Found” Error: Double-check your DocumentRoot path and ensure it points to the public folder. Also, verify mod_rewrite is enabled.
  • Domain Not Resolving: Ensure the hosts file is updated and saved correctly. Restart your browser or flush your DNS cache with ipconfig /flushdns in Command Prompt.
  • Apache Won’t Start: Check for syntax errors in httpd-vhosts.conf. Make sure all paths use forward slashes (/) instead of backslashes (\).

Why Use a Virtual Host?

Using a virtual host simplifies development by:

  • Providing a clean, production-like URL.
  • Allowing multiple projects to run side-by-side with unique domains.
  • Keeping your project secure by serving only the public folder.

Final Thoughts

Configuring a virtual host in XAMPP for CodeIgniter 4 is straightforward once you know the steps. It’s a great way to level up your local development setup. Have you tried this before, or do you have any tips to share? Let me know in the comments below!

Happy coding!

Scroll to Top