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 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 will be created as examples for this tutorial. The first folder is called test and the second site. See the full paths to the two folders below.

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

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

A PHP script called index.php can be placed in each new folder. Write a script for each of the websites that will uniquely identify them when we test them later. For example, print the name of each website so that it can be viewed in a browser.

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.

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 then 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 you 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 />
    Options FollowSymLinks
    AllowOverride None
</Directory>
<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 />
        Options FollowSymLinks
        AllowOverride None
    </Directory>
    <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.

How to Install a Local LAMP Stack on Linux

How to install a local LAMP stack on a Linux Mint or Ubuntu computer for local PHP and MySQL development or for development on a local WordPress website.

Why Install a LAMP Stack?

When developing PHP web pages and applications on a local Linux computer it is necessary to install a local web server and PHP language interpreter. It is common to install a “LAMP stack” which includes:

  • L – Linux: already on the computer used for development
  • A – Apache: the Apache web server
  • M – MySQL: the MySQL database
  • P – PHP: to enable PHP scripts to run on the web server

With the above components installed, local WordPress websites can be set up for developing and testing WordPress themes and plugins, or simply to host and test a WordPress website locally.

In addition to the LAMP stack, phpMyAdmin is usually installed to make it easy to create and edit MySQL databases.

This article shows how to install a local LAMP stack and phpMyAdmin on a Linux Mint or Ubuntu computer. The installation was tested on Linux Mint 18, but should work on other versions of Linux Mint and Ubuntu.

Installing a LAMP Stack

Open a terminal window (shortcut Ctrl + Alt + t) and do an update before installing the LAMP server.

And then:

To install the LAMP server enter the following in the terminal window.

Important: The caret (^) at the end of the above line is not a typo and must be included in the command. (Reference and how to remove the LAMP stack.)

After entering the above command, a list of changes that will be made is displayed in the terminal window. At the bottom of the list you will be prompted whether to continue or not.

Hit Enter to continue with the installation. During the installation you will be prompted to enter passwords as explained below.

MySQL Root User Password

Enter a password for the MySQL “root” user in the dialog box as shown below. Hit Enter when done.

MySQL Root Password
MySQL Root Password

You will be prompted to re-enter the same password. Type the password again and hit Enter.

MySQL Root Password Repeat
MySQL Root Password Repeat

After confirming the password the installation will continue for a while and then complete.

Default Apache Web Server Page

The default apache web server page of the local LAMP stack should display after entering localhost in the address bar of a web browser as shown below.

Apache Default Web Page
Apache Default Web Page

This web page can be found at /var/www/html on the host machine. If the index.html file is edited or replaced, the new page will then be found at localhost in a web browser.

Installing phpMyAdmin

To install phpMyAdmin, enter the following in a terminal window.

A list of packages that will be installed is displayed followed by a prompt to continue.

Hit Enter to continue with the installation. You will be prompted to choose the web server that will be configured to run phpMyAdmin. Choose apache2 by pressing the space bar.

phpMyAdmin Web Server Prompt
phpMyAdmin Web Server Prompt

After pressing the space bar, an asterisk will appear next to apache2 as shown below. Hit the Enter key to continue.

Select apache2 by Pressing the Space Bar
Select apache2 by Pressing the Space Bar

In the next dialog box, hit Enter to select the default of Yes.

Configuring phpMyAdmin
Configuring phpMyAdmin

You will now be prompted for a password for phpMyAdmin. Type a password and then hit Enter.

phpMyAdmin Password
phpMyAdmin Password

Confirm the password by entering it again.

phpMyAdmin Password Confirm
phpMyAdmin Password Confirm

The installation will continue and then complete.

Accessing phpMyAdmin

In Linux Mint Mate phpMyAdmin can be accessed from the menu button: Menu → Programming → phpMyAdmin. Alternatively enter localhost/phpmyadmin/ in the address bar of a web browser.

Use a user name of root and the password that you selected during installation to log in to the phpMyAdmin page.

Logging in to phpMyAdmin
Logging in to phpMyAdmin

Configuring the Local LAMP Stack

Instructions for configuring the local LAMP stack to make a development environment for PHP, MySQL and WordPress will be published in the next blog post. The post will include how to set up multiple test and development web sites on a single local computer as well as how to configure PHP for development.

Glade Packing Tutorial

Learn how to use the Glade box container to pack widgets into a window in this Glade packing tutorial. Use widget packing instead of a fixed grid.

Glade Fixed Grid Window vs. Glade Packing Window

The images below show a comparison between two windows. One of the windows was created using a fixed grid, and the other window was created using packing. When the windows are resized the packed window automatically positions the widgets, whereas the fixed grid window leaves the widgets in the same place.

Glade Fixed Grid Window (left) vs. Glade Packing Window (right) Windows Enlarged in Size
Glade Fixed Grid Window (left) vs. Glade Packing Window (right) Windows Enlarged in Size
Glade Fixed Grid (left) vs. Glade Packing (right) Windows Reduced to Minimum Size
Glade Fixed Grid (left) vs. Glade Packing (right) Windows Reduced to Minimum Size

In both images the window on the left is the window created in the GTK 3 C code ‘hello world’ tutorial using Glade 3 which uses a fixed grid. The window on the right is the window that will be created in this tutorial.

Tutorial Prerequisites

This tutorial follows the same format as the GTK+ 3 C code “hello world” tutorial using Glade 3 tutorial on this website. The project is created from the GTK+ 3 Glade 3 template files. Be familiar with the articles and tutorials listed below before continuing with this tutorial.

Glade Packing Example

Follow these tutorial steps to create a Glade window that uses the Glade box container for packing widgets instead of a fixed grid.

1. Start a New Project

Start a new project by making a copy of the GTK+ 3 Glade C programming template files.

Rename the template folder to packing. Open the makefile and rename the project to packing at the top of the make file as shown below.

Your project folder should now look as follows.

Glade Packing Project Structure
Glade Packing Project Structure

2. Edit the Glade File

Open the window_main.glade file in the glade folder using the Glade 3 editor.

2.1 Add the Box Container to the Window

Click Box under Containers in the left pane of Glade and then click the main window in Glade. A dialog box pops up asking for the number of items. Leave the value at the default of 3 and then click the Create button.

Inserting a Glade Box Container
Inserting a Glade Box Container

The main window will now appear to be divided into three horizontal parts.

2.2 Add Two Text Labels

Drag and drop two Label widgets from the left pane in Glade under Control and Display into the first and second box areas of the main window.

Change the label IDs and text to the same names used in the GTK+ 3 C code Hello World tutorial using Glade 3 (as described below). This is so that we can use the same C code with this project, but see how Glade packing works.

Change the ID of the first label to lbl_hello and the label text to as done in the above mentioned project.

Change the ID of the second label to lbl_count and the text to

Your main window in the Glade editor should now look as follows.

Glade Window After Adding Labels
Glade Window After Adding Labels

2.3 Add a Button

Drag and drop a Button widget from the left pane in Glade (under Control and Display) into the last (bottom) area of the box widget in the main window.

Change the button ID to btn_hello and the button text to Hello.

The button now spans the width of the window. To center the button, click the Common tab under Button Properties in the right bottom pane of Glade. Scroll down to find the Widget Spacing heading and change Horizontal: from Fill to Center as shown in the image below.

Changing Widget Spacing in Glade
Changing Widget Spacing in Glade

The main window should now look as follows.

Widgets in Main Window
Widgets in Main Window

2.4 Change the Main Window Width and Title

If the main window is clicked in the Glade editor, the GtkBox that we inserted will be selected because is was placed on top of the main window. To select the main window, use the top right pane and click window_main GtkWindow.

Select the General tab on the bottom right pane in Glade. Scroll down to find the default width and height. Change the default width to 180. Uncheck the default height box.

Change the window title from Template Window to Packing under Title (above the width and height settings).

Changing the Glade Main Window Width and Title
Changing the Glade Main Window Width and Title

2.5 Connect the Button Signal

Select the button by clicking it. Click the Signals tab in the bottom right pane of Glade. Under GtkButton, find clicked. Click the text next to clicked under the Handler heading that says <Type here>.  Click it again to edit it and start typing on. Press the down arrow to select the name suggested by Glade which should be on_btn_hello_clicked. Press enter to select the text. Press enter again to set the text.

Connecting the Glade Button Clicked Signal
Connecting the Glade Button Clicked Signal

Save the changes and preview the window by clicking the cog icon on the top Glade toolbar.

3. Application C Code

Copy and paste the same code from the GTK+ 3 C code Hello World tutorial using Glade 3 project into main.c in the src folder. The code is included below.

4. Build and Run the Project

Open a terminal window and change to the directory that your project is in. Build the project by entering make in the terminal window.

Run the project by entering ./packing into the terminal window or by double-clicking the packing application icon in the project folder from the file manager.

Clicking the Hello button should display “Hello, world!” in the first text label and increment a count in the second text label. The window can be resized and the widgets will now stay in the middle of the window horizontally.

Packing Application Window
Packing Application Window

Linux Mint Hash Sum Mismatch During Update

How to fix Linux Mint hash sum mismatch during update of software. The following messages appear after doing an update with sudo apt-get update and also appear in the Linux Mint Update Manager.

Linux Mint Hash Sum Mismatch Error Message
Linux Mint Hash Sum Mismatch Error Messages

Fixing the Linux Mint Hash Sum Mismatch Error

After trying several solutions to the problem (listed in the next section) here is the one that worked for me. Create a file called 99fixbadproxy in /etc/apt/apt.conf.d/ from the command line as follows:

This new file will open in the nano editor, now copy and paste the following into the editor:

Save the new file by pressing Ctrl + o and then exit the editor by pressing Ctrl + x. Now refresh the software updates from the command line as follows:

Or right-click the Update Manager icon on the bottom bar and click Refresh on the pop-up menu.

This solution worked for me and was suggested as a solution on the Linux Mint forums. The solution pointed to an answer on serverfault.com to do with Debian mirror hash sum mismatch. This solution should work for Linux Mint, Ubuntu and Debian as well as other Debian based systems.

Alternative Solutions to Fix the Hash Sum Mismatch

My first attempts at fixing the hash sum mismatch problem was to delete cached files on the system as many solutions suggested. Eventually I made my own shell script that included all the solutions to fix the error, however none of them worked permanently. The error would just reoccur later.

Here is my script solution. These commands can be run individually or copied into a script.

As can be seen in the script, any errors with dpkg are sorted out first. Two sets of cached update files are deleted and then the system is updated from scratch.

How to Install the GCC C++ Compiler on Linux Mint

If you try to compile C++ code on a Linux Mint or Ubuntu computer using gcc, the compile will fail. C++ code needs to be compiled using the g++ compiler which must first be installed. This article explains how to install the GCC C++ compiler on Linux Mint and Ubuntu based systems.

Trying to compile a C++ program with gcc gives the following error.

If g++ is used to compile the C++ program, an error message appears that indicates that g++ is currently not installed:

Installing the GCC C++ Compiler

Before installing new software it is best to update the system. Open a terminal window and enter the following.

Now install the C++ compiler by entering the following:

Compiling a Simple C++ Program

The simple “Hello World” C++ code shown below can be used to test if the C++ compiler is installed and working. Save the code to a text file called hello.cpp.

Compile the above program using the GCC C++ compiler as shown below. Open a terminal window and change directory to the directory containing the hello.cpp file before compiling.

This will create an executable file called hello which can be run from the terminal window by entering the following command.

The hello.cpp program is shown in the Geany editor here.

Hello World C++ Program Code
Hello World C++ Program Code

This is what the command line looks like after compiling the hello.cpp program using the g++ compiler and then running the hello application.

C++ Compiling in the Terminal Window
C++ Compiling in the Terminal Window

Hello, world! is printed in the terminal window when the program is run.