Home → Software → Iot → Setup Xampp Iot Linux

How to Set Up XAMPP for IoT Development with Local Websites on Linux

Created on: 2025-02-05

XAMPP is a powerful tool for developing LAMP (Linux, Apache, MySQL/MariaDB, PHP) applications locally on a development PC or laptop. For engineers and hobbyists working on Internet of Things (IoT) projects, such as using an ESP32 to send sensor data to a website, XAMPP provides an ideal local development environment. Although this guide focuses on setting up XAMPP from an IoT perspective, the setup applies equally to other IT development tasks, including PHP applications, frameworks, and content management systems (CMS) such as WordPress, Drupal, and Joomla.

When working with IoT devices like the ESP32, it's crucial to develop your web application locally before deploying it to a live web host. This guide explains how to set up XAMPP on Linux Mint to develop and test an IoT website. Specifically, it covers how to configure multiple virtual hosts (vhosts) that run from your home directory instead of from a subdirectory of /opt/lampp/. Apache virtual hosts enable multiple development websites to run on a single computer.

Apache 403 Error: Permission Problem on Linux

When setting up Apache virtual hosts using XAMPP on Linux, one typically encounters permission problems where Apache can't access the directory or folder that contains the files for the website or web application being developed. During development, both the developer (through a Linux login account) and the Apache web server need access to each virtual website on the local system. This article focuses primarily on these permission problems. When permissions are not set up properly and one tries to access a development website on a local computer running XAMPP, Apache will display an error like the following: 

Access forbidden!

You don't have permission to access the requested directory. There is either no index document or the directory is read-protected.

If you think this is a server error, please contact the webmaster.
Error 403
ciapp.localhost
Apache/2.4.58 (Unix) OpenSSL/1.1.1w PHP/8.2.12 mod_perl/2.0.12 Perl/v5.34.1

Why Use XAMPP for IoT Web Development?

In IoT projects, a local development environment is essential. Devices like the ESP32 communicate with a web server over the internet, sending sensor data for logging and display. The development process involves SQL (MySQL or MariaDB), PHP, HTML, CSS, and often JavaScript. The application is first built and tested locally using XAMPP, then deployed to a web host. JavaScript may be used to fetch sensor data from the database and update the web interface dynamically.

XAMPP provides a complete environment, including an Apache web server and MariaDB database, making it easy to develop and test IoT web applications. Locally, your IoT web app can log sensor data into a database and display it on a web page before being deployed to a remote server where the ESP32 will connect via WiFi.

Setting Up XAMPP on Linux for Local IoT Web Development

The following steps assume your Linux username is user, and therefore your home folder name is also user. Replace this with your actual username / home folder name.

It is also assumed that all local websites will be stored in a directory named websites within your home folder. If you choose a different folder name, be sure to replace websites with your actual folder name in the code examples that follow.

Step 1: Installing XAMPP on Linux for IoT and PHP Development

Download and install XAMPP for Linux from the official XAMPP installation page. Follow the installation instructions for your Linux distribution (see the XAMPP FAQs for Linux page for instructions), ensuring Apache, MySQL, and PHP are running.

After installing XAMPP, it can be started from the command line using the following command:

sudo /opt/lampp/lampp start

After starting XAMPP, check that it is working by opening a web browser and entering http://localhost/, or just localhost should work too. If XAMPP is working, a XAMPP web page will be displayed as shown in the image below.

Screenshot of XAMPP web page showing localhost after installation and startup on Linux
XAMPP Web Page in a Browser at localhost after
Installation and Starting XAMPP on Linux Mint

Leave XAMPP running for now. Later when finished using XAMPP, it can be stopped by entering the following on the command line.

sudo /opt/lampp/lampp stop

Step 2: Enable and Configure Virtual Hosts

After installing XAMPP and starting it as described above, help for setting up virtual hosts can be found by entering http://localhost/dashboard/docs/configure-vhosts.html in the web browser's address bar. The following instructions also describe how to set up virtual hosts, but provide much more detail on setting up directory permissions on Linux.

Step 2.1: Enable Virtual Hosts in httpd.conf

Before configuring virtual hosts, ensure that Apache is set to include the virtual hosts configuration file. Open the httpd.conf file in a text editor: 

sudo nano /opt/lampp/etc/httpd.conf

Locate the following line: 

# Virtual hosts
# Include etc/extra/httpd-vhosts.conf

If the line is commented out (with a # at the beginning), remove the # to enable it: 

# Virtual hosts
Include etc/extra/httpd-vhosts.conf

Save the file and exit the editor. Use Ctrl + O to save the file, and Ctrl + X to exit the nano editor. This ensures that Apache will load the virtual hosts configuration file.

Step 2.2: Edit the httpd-vhosts.conf File

Now that virtual hosts are enabled, open the httpd-vhosts.conf file to define your custom virtual hosts. 

sudo nano /opt/lampp/etc/extra/httpd-vhosts.conf

Add the following entry for a sample development website:

<VirtualHost *:80>
    ServerName ciapp.localhost
    DocumentRoot "/home/user/websites/ciapp/public"
    <Directory "/home/user/websites/ciapp/public">
        Require all granted
        AllowOverride All
    </Directory>
</VirtualHost>

Edit the Directory Names / Path

Modify the path next to DocumentRoot and Directory in the above code to suit your own setup. This particular example was set up for a web app based on the CodeIgniter PHP framework that uses a folder called public. The name ciapp was chosen as the folder or directory that contains the app, where public contains the publicly accessible web files.

In summary, here is a description of each directory used in the paths above:

  1. home : Linux home directory
  2. user : Logged-in user's home directory – change if necessary
  3. websites : Directory containing all local virtual-hosted websites – change if necessary
  4. ciapp : Custom directory name for the particular website or app – change to suit your website or app
  5. public : Publicly accessible folder that the server name points to – this may be called public_html by some web hosts – change if needed

The XAMPP Page on localhost No Longer Works

Enabling vhosts and then adding a vhost configuration, as above, usually results in the XAMPP page on localhost failing to load once XAMPP has been restarted. To resolve this issue, insert the following into the httpd-vhosts.conf file, above the virtual host configuration you added. 

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot "/opt/lampp/htdocs"
    ServerName localhost
    <Directory "/opt/lampp/htdocs">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

The following is an example of a full httpd-vhosts.conf file with two virtual host configurations and the code that ensures the XAMPP files on localhost remain accessible. 

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine, you can set up VirtualHost containers for them. Most configurations
# use only name-based virtual hosts, so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to set up virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#


<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot "/opt/lampp/htdocs"
    ServerName localhost
    <Directory "/opt/lampp/htdocs">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>


<VirtualHost *:80>
    ServerName ciapp.localhost

    DocumentRoot "/home/user/websites/ciapp/public"
    <Directory "/home/user/websites/ciapp/public">

        Require all granted
        AllowOverride All
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerName test.localhost
    
    DocumentRoot "/home/user/websites/test/public_html"
    <Directory "/home/user/websites/test/public_html">
    
        Options Indexes FollowSymLinks Includes ExecCGI
        Require all granted
        AllowOverride All
    </Directory>
</VirtualHost>

Step 2.3: Check If /etc/hosts Needs Modification

If your site uses a .localhost domain (e.g., ciapp.localhost), the system will resolve it automatically, and no changes to /etc/hosts are necessary. However, if you use a different format, such as ciapp.dev or ciapp.test, you must manually add an entry to /etc/hosts to map the domain to 127.0.0.1: 

127.0.0.1 ciapp.dev

To add this entry, open the /etc/hosts file using sudo nano with the following command: 

sudo nano /etc/hosts

This will open the hosts file in the nano text editor with superuser privileges. Add the necessary line at the end of the file: 

127.0.0.1 ciapp.dev

After adding the line, save and exit nano by pressing CTRL + X, then press Y to confirm the changes, and hit Enter to exit.

Step 2.4: Restart Apache

After saving the changes, restart the Apache server to apply the new virtual host configurations:

sudo /opt/lampp/lampp restart

Step 3: Managing Permissions for Your Development Files

To ensure that Apache can access your project files while maintaining security, add your user account to the daemon group and set file permissions accordingly. 

sudo usermod -aG daemon user

Note: For the change to take effect, you must either log out and log back in, or restart your system. This allows your user account to be recognized as part of the daemon group.

Change the group ownership of your project folder:

sudo chown -R user:daemon /home/user/websites/ciapp

Set the appropriate permissions:

sudo chmod -R 750 /home/user/websites/ciapp
sudo chmod -R 770 /home/user/websites/ciapp/public

The above commands provide examples using ciapp, located in websites. Modify the directory names in the commands to match your own directory structure.

Step 4: Testing the Virtual Host

If your web application files are not yet ready, create a simple dummy HTML file in the public-facing folder to confirm that the virtual host is working correctly. You can create a basic index.html file with placeholder text using the following command (change the directories in the command to match your configuration): 

echo "<html><body><h1>Virtual Host Test Successful</h1></body></html>" > /home/user/websites/ciapp/public/index.html

After setting up your virtual host, test it by entering the server name you configured in the virtual host file into your web browser. For example, if you set up ciapp.localhost, enter the following into the address bar: 

http://ciapp.localhost/

If everything is configured correctly, you should see your website or application load. If not, check the Apache error logs for troubleshooting.

Step 5: Adding Additional Virtual Hosts

To add more locally hosted websites, repeat the virtual host setup process. Go back to Step 2 and follow the instructions to create a new virtual host entry. Ensure that each site has a unique ServerName and a separate directory within your websites folder.

When following the above steps to add a new virtual host, you do not need to edit /opt/lampp/etc/httpd.conf again, as virtual hosts only need to be enabled in this file once. Therefore, you can start at Step 2.2: Edit the httpd-vhosts.conf File. In Step 3: Managing Permissions for Your Development Files, you do not need to add your username to the daemon group again, as this is only necessary to do once.

After setting up the new virtual host, restart Apache using: 

sudo /opt/lampp/lampp restart

Step 6: Logging Sensor Data in a Database

In IoT applications, logging sensor data is a key requirement. XAMPP's MariaDB or MySQL server provides the database functionality needed to store and retrieve data from IoT devices like the ESP32.

Step 7: Deploying the Web Application to a Web Host

Once the local development of your IoT website is complete, deploy it to a live web host. This involves uploading files, setting up the database, and configuring the ESP32 to send sensor data to the live server over the internet.

Conclusion

Using XAMPP on Linux for local IoT development is an efficient way to build and test your web applications. By configuring virtual hosts in your home directory and setting proper file permissions, you can create a structured and secure development environment before deploying your website to a live server.

For more information, visit the XAMPP official website.

IoT Software