Search code examples
wordpressxampp

Local WordPress website administration on two PCs


I have already installed XAMPP in my local computer and also a WordPress website. Is there a way to see the default page of my WordPress website (only the page, not the administration) from an another PC in the same network (home network)?


Solution

  • Having a URL such as http://example.dev/index.php instead of http://localhost/example/index.php is much clearer, works better with some website "extensions" involving paths and routing, and stored passwords are much easier to manage in browsers. Let's face it; it's just better all around.

    Since you've asked for external access (two PCs), I've changed this from my original configuration example, which is isolated from access except through the loopback interface. This example assumes your LAN is properly secured. Either firewall your LAN or change configuration as noted in commented portions of the configuration file to be more specific about access.

    There are a few steps to get it working, but once you get used to the two files you'll work with, it's quite easy to set up a new project later.

    Activate Modules in httpd.conf

    LoadModule rewrite_module modules/mod_rewrite.so
    LoadModule log_config_module modules/mod_log_config.so
    

    Activate Virtual Host Settings in httpd.conf

    #Listen 12.34.56.78:80
    Listen 80
    
    <VirtualHost *:80>
    

    Comment out directory information

    #DocumentRoot "E:/xampp/htdocs"
    #<Directory "E:/xampp/htdocs">
    ...
    

    Be sure to close the VirtualHost directive before the file includes:

    </VirtualHost>
    

    Configure Virtual Hosts Configuration File

    After making the previous changes to Apache’s base-level configuration file, you can work with the vhost extra configuration file (%xampp%/apache/conf/extra/httpd-vhosts.conf).

    <VirtualHost *:80>
        ServerAdmin webmaster@myexamplesite.dev
        DocumentRoot "C:\Users\JHaas\Documents\Projects\MyExampleSite"
        ServerName myexamplesite.dev
        ServerAlias myexamplesite.dev
        ErrorLog "logs/myexamplesite.dev-error.log"
        CustomLog "logs/myexamplesite.dev-access.log" common
    
        <Directory "C:\Users\JHaas\Documents\Projects\MyExampleSite">
            Options Indexes FollowSymLinks
            AllowOverride all
            Order Deny,Allow
            Deny from none
            Allow from all
            #Allows a specific IP to access your VHost
            #Allow from 10.0.0.24
        </Directory>
    
        DirectoryIndex index.html index.php
    </VirtualHost>
    

    Editing /etc/hosts

    Finally, you edit the /etc/hosts file. This file helps your system bypass the need for a DNS query, allowing you to create your own TLD (top-level domain) suffix, such as *.dev, or anything that isn’t going to collide with current new top-level domain suffixes (*.me used to be quite popular until that suffix itself became a TLD suffix).

    The localhost entry is not always required (depending on platform), and from my experience has actually caused problems if uncommented, so leave it commented out if it is already. If you see that localhost is not commented out (again, depending on your platform), be sure to leave it so. Changing the localhost entry from default can cause issues for many network services if it’s changed.

    Also note that Google Chrome has an issue with using *.local, so it’s probably best to avoid using this TLD suffix.

    Host computer:

    127.0.0.1   localhost
    127.0.0.1   myexamplesite.dev
    

    On the other computer, modify the /etc/hosts file to have an entry for your computer.

    10.0.0.27   myexamplesite.dev
    

    You can test your changes to the configuration files via command line using apache/bin/httpd.exe -t. This runs a syntax check on your configuration files.