Developing websites locally

I have realized many projects based on webapplications. When you jump into this topic you tend to use XAMPP and there is nothing to say against it. To be honest, I still use this application. It is super easy and very efficient because you do not have to spend too much time with the configuration of your local server. But there is a very common failure many beginners tend to make: they do not use the full power of the tool.

How does it work in the wild?

We have to understand that there are two popular ways to address servers. To make it easier to understand it, you have to think of a building that hosts multiple parties. For example: a shopping mall with multiple stores.

• The first and simplest way is to use the IP-addresses. It is the simplest way because one IP-address should be assigned to exactly one server. (This is true for the protocol in version 6 but not for version 4. But lets stop here. Otherwise we would have to explain a lot.) So a server would listen to a port on an interface and serve files from a webroot. If you want to host multiple sites you would have to use subfolders. There is a downside if we want to use easy navigation based on relative paths: the webroot is not the root-folder of the site! Another downside of this approach: You have to remember numbers instead of words. If we map this on our example you just use the unique address of each store and do not have another possibility to find it.
• The second way is to use hostnames. Like written before, it is easier for us humans to remember words than four numbers. Hostnames can be compared with shopnames or labels. The hosting system knows where it has to guide you if you tell it the label you are looking for. (like employees of shopping malls) And all this is possible without the knowledge of the complete address. (But you are still able to find the shop with the exact address.)

Support is near

To be able to guide the right way there has to be a map with the address and the labels. When we talk about webservers we use the terminology virtual blocks (nginx) or virtual hosts (apache). The configuration of these blocks or hosts tells the server which directory it has to serve when a user requests a host. Within XAMPP this can be done via the "httpd-vhosts.conf"- file. You can find this file in the following subfolders of your XAMPP-installation: "apache\conf\extra".

<VirtualHost *:80>
    ServerAdmin name@domain.tld
    DocumentRoot "C:/xampp/htdocs/domain.tld"
    ServerName domain.tld
    ServerAlias www.domain.tld
    ErrorLog "logs/domain.tld-error.log"
    CustomLog "logs/domain.tld-access.log" common
</VirtualHost>

This example states that both addresses "domain.tld" and "www.domain.tld" are handled by the server via this entry.

Working with that knowledge

Ok so now we are able to serve different content based on the domain we request. But for now the hostnames are not pointing to our local environment. So we either need to reconfigure our local DNS or the hosts-file of the system. When we use the DNS all of the devices in the network will be manipulated. Otherwise only our single computer will be affected. I always liked to work with both versions of the project (online/productive and local/development) at the same time. This is possible because my online versions always start with www (at least websites). So I can configure the hosts file so that only entries without the www are handled by my local system. Please keep in mind that you may also need to deactivate the redirect to the www if you have already done your SEO.