How to install a Web server with XAMPP

It is possible that at some point you have considered or had the need to set up your own Web server. In this post we are going to see how to set up a Web server with the help of XAMPP.

Let’s remember that a Web server is nothing more than a program that handles Http requests and responds by serving (hence its name) files (html, images, etc), which the client receives on their device and generally renders in a browser.

Fortunately, it has been a long time since setting up a Web server is much simpler than it seems thanks to the existence of packages like XAMPP. These distributions incorporate everything we need in a single installer and are controllable from a unified control panel.

XAMPP is free and distributed under GNU license. It is multi-platform with versions for Linux, Windows, and Mac Os.

Why do I want a Web server?

Although it may be contradictory to the title of this section, first we are going to see what we do not want a Web server on our own computer for.

Setting up a local (or home) Web server is not intended for serving a web page from your home. For that, it is more convenient to choose a hosting company that hosts the website.

The reasons are essentially the requirements for providing a web page. You need a computer that is permanently turned on and connected to the Internet. In addition, you need a significant bandwidth. But, above all, you need a domain redirected through your router to your IP address, which, to make matters worse, will likely be dynamic.

So why DO we want to install a Web server on our own computer? The main reason is to use it as a test environment, either to test web applications that we have downloaded, or because we are doing development and need to test its operation before uploading it to the real server.

Another reason may be that we really want a local web page, which we can host on a small server computer (or even on a mini PC like a Raspberry Pi). For example, we can create a private cloud to share files with the rest of the team, put a corporate web page on the intranet, view our multimedia files on home devices, etc…

Having a local Web server is also interesting for IoT and home automation applications. For example, being able to turn lights on or off at home, check power consumption, and even control thermostats.

Finally, another reason for wanting to install a Web server is simply to learn how to do it. It serves us to practice with the installation and configuration of a Web server since, in the case of cloud-hosted servers, the procedure is similar (although it is necessary to pay more attention to optimizations and security).

This is just some of the many uses for which you may need to install a Web server on your computer. But, in summary, if you want to dabble in the Web, you need to have a Web server installed.

What is XAMPP?

XAMPP is a distribution that groups various applications into a single package. It is one of the most common solutions for setting up a Web server quickly.

The XAMPP package is composed of the popular Apache Web server along with a database (MySql or MariaDB) and a server-side programming language (PHP/Perl).

The acronym is precisely a composition of X (multioperating system), A (apache), M (MySQL/MariaDB), and P (PHP/Perl).

The XAMPP acronym has different variations, depending on the operating system it is intended for. Thus, you will see terms like:

• XAMPP = MultiOS + Apache + MySQL/MariaDB + Perl/PHP
• WAMP = Windows + Apache + MySQL/MariaDB + Perl/PHP
• LAMP = Linux + Apache + MySQL/MariaDB + Perl/PHP
• MAMP = Mac + Apache + MySQL/MariaDB + Perl/PHP

In addition, it incorporates Filezilla for creating FTPs, Tomcat, an open-source implementation of Java Servlets, and Mercury, an email server. We will not see these points in this tutorial, but we present them because you will see the buttons on the control panel.

How to install XAMPP?

We are going to see how to install XAMPP on Windows. In Linux we will see it soon in a Raspberry Pi tutorial although, in general, the process is very similar.

As we have said, the installation of XAMPP is very simple, being precisely one of its strong points. First, we download the installer for our operating system from the address https://www.apachefriends.org/es/index.html.

We run the installer, leaving all the options installed

We select the path where we want to install XAMPP. The default path (“C:\Xampp”) is advisable in most cases.

On the next screen, we leave the option to learn more about Bitnami unselected.

We wait for the XAMPP installation to finish.

Finally, we finish the installation, leaving the option “Launch the control panel now” selected.

How to configure XAMPP

Once the XAMPP installation is complete, the control panel will open. Later we can launch it from the start menu, or make it start automatically with Windows.

The XAMPP control panel appears as an icon in the notification area, so we can access it at any time.

The first time we launch the control panel, it lets us choose between English or German language.

Next, we will see the control panel, which shows the status of the services that make up the XAMPP package. In addition, it allows us to start each of the services, as well as access the configuration and log of each of them.

To get XAMPP to start functioning as a Web server, we normally want to start the first two services, Apache and MySQL.

As an additional step, and to see an example of a configuration change, we are going to change the listening port of Apache from 80 to 81. The reason is that port 80 is very “requested” and we can have conflicts with other programs that use this port (like the Microsoft IIS Web server, which you may have installed).

We click on the “Config” button for Apache, and then on the “Apache (httpd.conf) file.

In the text file that opens, we look for the line that says “Listen 80”. We change the port from 80 to 81, like this.

With this example/precautionary change made, we start the Apache and MySQL services by clicking both Start buttons. If everything has gone well, we will see that both services are activated, which we can verify because the name turns green, the process indicator (PID) for each of them is indicated, and the ports they are using.

We have XAMPP up and running! It has been easy, right? Now let’s start using it.

Testing XAMPP

We are going to verify that our Web server is indeed working. We open our favorite browser, and enter the URL http://localhost:81/. We will see that the XAMPP welcome window loads, indicating that we are indeed serving Web pages.

We can also access the following address to check the status and configure the database integrated in XAMPP via the URL http://localhost:81/phpmyadmin/.

Using XAMPP

We have verified that XAMPP is working. Now let’s see how to serve our Web pages with a simple example, our “Hello world” Web!

Inside the path where we have installed it, we have a folder called htdocs (by default “c:\XAMPP\htdocs”). Each folder we put inside this folder will be treated as a URL by XAMPP.

If we go to our htdocs folder we will see that it contains a folder called Dashboard, which is precisely the web page we have viewed in the previous section.

Following our example, we create a new folder called, for example, HelloWorld. Inside it, we create a single text file named “index.html” with the following content.

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>My page</title>
        <meta name="description" content="">
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

Finally, in the browser we enter this path “localhost:81\HelloWorld”. We will see that the result is as follows.

Our simple “Hello World” page. It is not the most sophisticated web page in the world (in fact, it could hardly be less) but… this means that everything is working correctly!

Now you can create as many folders (i.e., web pages) as you need, and we will access them in the same way by indicating the localhost path followed by the folder name.