How to Create Your Own Server with XAMPP for HTML5 and CSS3 Programming - dummies

How to Create Your Own Server with XAMPP for HTML5 and CSS3 Programming

By Andy Harris

It’s much more difficult to set up a working server system by hand than it is to start programming HTML5 and CSS3 with it. Web hosting solutions can often be intimidating.

Setting up your own system by hand isn’t recommended. It’s simply not worth the frustration because very good options are available.

XAMPP is an absolutely wonderful open-source tool. It has the following packages built in:

  • Apache: The standard web server and the cornerstone of the package

  • PHP: Configured and ready to start with Apache and MySQL

  • MySQL: Also configured to work with Apache and PHP

  • phpMyAdmin: A data management tool that’s ready to run

  • Mercury Mail: A mail server

  • FileZilla FTP server: An FTP server

  • PHP libraries: A number of useful PHP add-ons, including GD (graphics support), Ming (Flash support), and more

  • Additional languages: Perl, another extremely popular scripting and server language, and SQLite, another useful database package

  • Control and configuration tools: A Control Panel that allows you to easily turn various components on and off

This list is a description of the Windows version. The Mac and Linux versions have all the same types of software, but the specific packages vary.

Considering the incredible amount of power in this system, the download is remarkably small. The installer is only 34MB.

XAMPP installation is pretty painless: Simply download the installer and respond to all the default values.

If you use Windows, you may want to change where the package is installed because the program files directory causes problems for some users. You can install XAMPP in root of the C: drive on Windows installations. The default directory is fine for Mac and Linux.

Running XAMPP

After you install XAMPP, you can manage your new tools with the XAMPP Control Panel.


Some components of XAMPP run only when they’re needed. Some other components (Apache and MySQL) are meant to run constantly in the background. Before you start working with your server, you need to ensure that it’s turned on.

You can choose to run Apache and MySQL as a service, which means that the program is always running in the background. This arrangement is convenient, but it slightly reduces the performance of your machine. You can turn both Apache and MySQL on and off as you need it.

Leaving server programs open on your machine constitutes a security hazard. Be sure to take adequate security precautions.

Test your XAMPP configuration

Ensure that Apache and MySQL are running, and then open your web browser. Set the address to http://localhost.


This page indicates that XAMPP is installed and working. Feel free to experiment with the various items in the Demos section. Even though you may not know yet what they do, you should know what some of their capabilities are.

Add your own files

Of course, the point of having a web server is to put your own files in it. Use your file management tool to find the XAMPP directory in your file system. Right under the XAMPP directory is the htdocs folder, the primary web directory. Apache serves only files that are in this directory or under it.

All the files you want Apache to serve must be in htdocs or in a subdirectory of it.

When you specified http://localhost as the address in your browser, you were telling the browser to look on your local machine in the main htdocs directory. You didn’t specify a particular file to load. If Apache isn’t given a filename and it sees the file named index.html or index.php, it displays that file, instead.

So, in the default htdocs directory, the program is immediately being called. Although this program displays the XAMPP welcome page, you don’t usually want that to happen.

Rename to or something similar. It’s still there if you want it, but now there’s no index page, and Apache simply gives you a list of files and folders in the current directory.


You typically don’t want users to see this ugly index in a production server, but in a development environment you can see exactly what’s on your server. After everything is ready to go, you can put together or pages to generate more professional directories.

Generally, you want to have subdirectories to all your main projects.

Set the security level

When you have a web server and a data server running, you create some major security holes. You should take a few precautions to ensure that you’re reasonably safe:

  • Treat your server only as a local asset. Don’t run a home installation of Apache as a production server. Use it only for testing purposes. Use a remote host for the actual deployment of your files. It’s prepared for all the security headaches.

  • Run a firewall. You should run, at an absolute minimum, the Windows firewall that comes with all recent versions of Windows. You might also consider an open-source or commercial firewall. Block incoming access to all ports by default and open them only when needed. There’s no real need to allow incoming access to your web server. You only need to run it in localhost mode.

  • Run basic security checks. The XAMPP package has a handy security screen. Click the security link at the bottom of the page for some easy-to-use security utilities.


  • Change the MySQL root password. If you haven’t already done so, use the security link to change the MySQL root password.

  • Add an XAMPP Directory password. Type a password into the lower half of the security form to protect your directory from unauthorized access. When you try to go to the directory, you’re prompted for this password.


Security is always a compromise. When you add security, you often introduce limits in functionality.