Apache configuration: automatic renaming of "file:///C:/xampp/htdocs/" to "localhost" in url when opening a local html file

Question

I'm new to web development so bear with me. I might be missing something despite all my searches.

When I open an html file (of course from a directory served by Apache), it opens in a browser but the url is:

file:///C:/xampp/htdocs/path/to/file.html

This way it does not get served by Apache, so for that to work I have to rename the host-part of the path to the host's name. So if the host-path is

C:/xampp/htdocs/

then I have to rename that part of the url to the hostname, in this case "file:///C:/xampp/htdocs/path/to/file.html" must be renamed to "localhost/path/to/file.html" if Apache is to serve the page.

I've tried adding a virtual host that includes the "file:///" in its path but that crashes Apache (and xampp).

Question: Is there a way to avoid this manual renaming of urls when opening local html files to be served by Apache?

Answer 1

Made a little "url2hostname" extension to chrome that saves me the 1.42 seconds of url clicking and renaming every time i open a local html file in chrome. I'll write it down for consistency and repetition.

I have a virtual host set up for a dropbox directory. So in httpd-vhosts.conf:

<VirtualHost *>
    DocumentRoot "C:\Users\hns\Dropbox\Webb"
    ServerName localhost
    <Directory "C:\Users\hns\Dropbox\Webb>
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory> </VirtualHost>

So in "C:\Users\hns\Dropbox\Webb" is where I keep lots of webpages that I just want to test locally (and they must be served by apache to work properly). When I open them in chrome the url gets messed up like "file:///C:/Users/hns/Dropbox/Webb/f/index.html" for example. So in this case I have to select the "file:///C:/Users/hns/Dropbox/Webb"-part of the url and rename that to the servername so it becomes: "http://locahost/f/index.html".

So when I've opened a local html file and click the chrome extension it just replaces the path and protocol in the url and goes to the resulting url (which is then loaded correctly):

chrome.browserAction.onClicked.addListener(function() { 

    chrome.tabs.query({'active': true, 'currentWindow': true}, function (tabs) {
        var currentURL = tabs[0].url;
        newURL = currentURL.replace("file:///C:/Users/hns/Dropbox/Webb", "http://localhost");
        chrome.tabs.update(tabs[0].id, {url: newURL});
    })
});

Hey, at least I learned something :)

EDIT:

The real problem was not Apache but Chrome and cross origin:

Due to the "same origin policy", sometimes sites content cannot be properly displayed locally. So in my case the problem could have been solved by just turning that policy off by starting chrome from a shortcut with flags like –allow-file-access-from-files or –disable-web-security.

Answer 2

I know it's been a while since this thread had any activity, but I've created a Chrome extension exactly for this scenario. :)

The name is Localhost Automate, and it redirects the developer to http://localhost according to a predefined folder.

I hope someone will find this useful. :)

https://chrome.google.com/webstore/detail/localhost-automate/pplnfonehjimoddpmnhldhkgojhkjcfh

And there's also the github repo; https://github.com/Ardethian/localhost_automate

Enjoy :)

Answer 3

I found a better way, no extensions needed, and works for every browser.

Edit httpd-vhosts.conf file (In my system E:\xampp\apache\conf\extra and edit httpd-vhosts.conf)

Add the below lines and save the file, don't delete anything

"VirtualHost *:80

ServerName localhost

ServerAlias localhost

DocumentRoot e:/xampp/htdocs //or whatever link you want//

/VirtualHost"

Restart Xampp