Configure Apache for Local Web Development

How to configure Apache 2 web server on a local Linux computer for local web development. Configure Apache to host multiple local web sites for web development on Linux Mint or Ubuntu.

The previous blog post describes how to set up a LAMP stack on a local Linux computer. This post shows how to set up multiple web sites on a single local LAMP server. Having copies of websites on a local computer allows PHP code and WordPress plugins or themes to be developed and tested on a local computer. After testing the PHP code or plugins, they can be uploaded to the live version of the website.

Apache Settings for Local Web Development

Be sure to install a local LAMP stack before continuing with this tutorial.

Choose the Websites Location

Make a folder that contains your local websites. This should be in your home directory or folder. As an example, you could create a folder called websites in your home directory. The full path to the folder would then be:

/home/<user name>/websites/

Create a Folder for Each Website

Create a new folder for each local website that you want. Create these folders inside the main folder that you created in the previous step. Two folders are created as examples for this tutorial. The first folder is called test and the second site as shown below.

/home/<user name>/websites/test/
/home/<user name>/websites/site/

More folders for additional websites can be added at any time.

Write a PHP script called index.php for each of the websites that will uniquely identify them. For example, print the name of each website so that it can be viewed in a browser. Save the scripts to their respective website folders created above.

Example index.php script for the test website:

Make a similar PHP file for the site website, but substitute Site in the file for Test in two places.

Configure Apache 2 Web Server

A configuration file for each local website must be created by copying an existing file in the Linux file system. Open file manager as root to edit the file system files. Alternatively use the command line and a text editor such as nano.

Opening the File Manager as Root

Press Alt + F2 to open the Run Application dialog box. In Linux Mint Mate, type gksudo caja in the dialog box and hit the Enter key. Caja is the file manager in Linux Mint Mate. Substitute the file manager name for your Linux distribution in the run box.

Run Application Dialog Box
Run Application Dialog Box

After pressing Enter, you will be prompted for your Linux password. Enter your password and the file manager will start with root privileges.

Caution: With the file manager opened as root it is possible to edit or delete any file in the file system. Use the file manager with great care when it is opened as root and close it immediately after all the file system files have been edited.

Create the Apache 2 Configuration Files

Use the file manager to navigate to:

/etc/apache2/sites-available/
Apache Sites Available Folder
Apache Sites Available Folder

Make a copy of 000-default.conf for each website that will be configured. Drag this file in file manager and hold down the Ctrl key before dropping it in the same folder to make copies of this file. Rename each new file to the name of the folders being used, i.e. test and site for this example. The image below shows the two new files created by copying 000-default.conf in the file manager. The files are renamed next.

Copying the Apache Configuration File
Copying the Apache Configuration File

To rename a file in file manager, click the file to select it and then press F2 to edit it. Now type the new name and press the Enter key. The result of renaming the two files is shown below. You should now have two files called test.conf and site.conf which are copies of 000-default.conf.

Renaming the Apache Configuration Files
Renaming the Apache Configuration Files

Editing the Apache Configuration Files

Each of the configuration files must now be edited. Double-click test.conf to open it for editing (this must be done in the file manager opened as root or else it will not be able to be saved). Add the following lines to the file. First change the server name at the top of the file. Modify the paths in the below text to suit your user name and website name. The sever name and paths are marked in bold in the next code listing.

ServerName test

ServerAdmin webmaster@localhost
DocumentRoot /home/user/websites/test/
<Directory /home/user/websites/test/>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Require all granted
</Directory>

The complete file looks as follows:

<VirtualHost *:80>
    # The ServerName directive sets the request scheme, hostname and port that
    # the server uses to identify itself. This is used when creating
    # redirection URLs. In the context of virtual hosts, the ServerName
    # specifies what hostname must appear in the request's Host: header to
    # match this virtual host. For the default virtual host (this file) this
    # value is not decisive as it is used as a last resort host regardless.
    # However, you must set it for any further virtual host explicitly.
    ServerName test

    ServerAdmin webmaster@localhost
    DocumentRoot /home/user/websites/test/
    <Directory /home/user/websites/test/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>
    
    # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
    # error, crit, alert, emerg.
    # It is also possible to configure the loglevel for particular
    # modules, e.g.
    #LogLevel info ssl:warn

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    # For most configuration files from conf-available/, which are
    # enabled or disabled at a global level, it is possible to
    # include a line for only one particular virtual host. For example the
    # following line enables the CGI configuration for this host only
    # after it has been globally disabled with "a2disconf".
    #Include conf-available/serve-cgi-bin.conf
</VirtualHost>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

It is important to modify the lines above marked in bold. These lines will be different for each website and must contain the name of the web server and path to each website’s folder.

Save and close these files after editing.

Activate the New Local Websites

Right-click in the file manager that was opened as root and should have the /etc/apache2/sites-available/ folder open. In the menu that pops up click Open in Terminal to open this folder in a terminal window.

In the terminal window, type a2ensite followed by the site name(s), e.g.:

a2ensite test site

The terminal window is shown below after running the command.

Enabling Apache Websites for Local Web Development
Enabling Apache Websites for Local Web Development

The terminal window can now be closed.

Configure Host

In the file manager that was opened as root, navigate two folders back. This will be the /etc/ folder. Open the hosts file for editing (/etc/hosts).

Add the names of the new sites next to the IP address of 127.0.0.1. The edited file is shown below.

127.0.0.1    localhost
127.0.1.1    toshi
127.0.0.1    test
127.0.0.1    site

# The following lines are desirable for IPv6 capable hosts
::1     ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

Save and close the file.

Open a terminal window and enter the following to restart the Apache server so that the changes can take effect.

sudo service apache2 restart

Modify File and Folder Permissions

The new websites are now configured, but Apache does not have permission to access your local website folders. Before continuing, close the file manager that you opened as root.

Open a normal file manager (not as root) and navigate to your website folders. Select the website folders (test and site for this example) and right click them. In the menu that pops up, click Properties. In the Properties dialog box, click the Permissions tab. Change the permissions for Group and Others to Access Files and Read-only as shown below. Click the Apply Permissions to Enclosed Files button and then the Close button.

Changing File Permissions
Changing File Permissions

In the file manager, move one level back and using the same method, change the permissions for the websites folder to Access files for the Folder access options for Group and Others. Do the same for your home folder.

Access the Local Websites

The local websites used as examples in this tutorial can now be accessed from a browser. Type http://test in the browser address bar to access the test website and http://site to access the site website. You can now use the new websites for local web development of PHP and WordPress sites or other sites or applications that use a LAMP stack.

Test Website after Apache Configuration
Test Website after Apache Configuration

Further Configuration

You may also want to configure PHP to display error and warning messages during software development on the local LAMP stack. Enabling error and warning messages to be displayed helps with debugging PHP code locally before moving it to a live production server.

2 thoughts on “Configure Apache for Local Web Development”

  1. Thank you for this great guide I was finally able to get setup. I do have a question though, isn’t there an easier way of doing all this to develop locally?
    It hurts just thinking if I want to re-install/change distro that I am going to have to do this all over again.
    When I was still on windows all i had to do was install wamp and done!
    On ubuntu besides manually installing it all then stopping the services from auto starting, then starting stopping them when needed etc..

  2. Isn’t the lamp-stack by default configured to respond to request from outside? I would appreciate info about that, and if it is, how to configure it to be closed only for localhost development mode, also the database lock down configuration, as needed. IIRC all these packages are configured for production when installed by apt-get, so while your setup of site will make the site available, your local computer will also make it public on local network (or even farther, if router is fwding, etc)?

    I will verify later at home, I think nobody wants to have local development apache install visible from outside, or only from specified machines (if for example testing from mobile device, etc).

Leave a Reply

Your email address will not be published. Required fields are marked *