As a web developer, you should understand how all the parts of a website work together including how a web server works. You may also want to learn a language such as PHP in which case a web server is required. Configuring and maintaining a web server will give you in-depth knowledge of many of the finer points of web development. It will prepare you for the environment in which developers work. This tutorial is part of a set of tutorials on setting up a WAMP dev box. No considerations are made for security.

Viewing vs serving

You have quite likely already been writing some HTML and viewing your pages locally in your browser.

It is important to note the difference between simply viewing a file locally and serving the same file on a web server. Note the information in the address bars below, the file path C:/Apache24/htdocs/index.html on the left vs the URL of the local machine, 127.0.0.1 on the right.

An HTML page (a text file) open in a browser.
An HTML page (a text file) opens in a browser.
A text file being served by Apache in a browser.
An HTML page (a text file) is served by Apache in a browser.

Download

You are looking for the version specifically maintained for Windows which is available from the downloads page at Apache Lounge: https://www.apachelounge.com/download/ 

Install

Install Apache on your C-drive: C:\Apache24

C
 ∟ Apache24

During the Apache install, a directory named htdocs is created; this is where your website files will reside.

The Apache Service Monitor will also be installed.

Configure

Configuration is done in a text file called httpd.conf.

Additional configuration can be made using .htaccess files. See the Apache’s .htaccess file tutorial.

Lines preceded by a # are comments.

httpd.conf

The config file is a simple text file which contains all the configuration details required for the server to work on your computer.

C:\Apache24\conf\httpd.conf

C
 ∟ Apache24
   ∟ htdocs
     ∟ conf
       ∟ httpd.conf

Default homepage

Configure the homepage (default page) for your website. By default, it is a file named index.html

#
# DirectoryIndex: sets the file that Apache will serve if a directory
# is requested.
#
<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>

C
 ∟ Apache24
  ∟ htdocs
   ∟ index.html

PHP

Configure PHP (see the post Installing PHP on a Windows dev box)

# PHP8 module
PHPIniDir "C:/php"
LoadModule php_module "C:/php/php8apache2_4.dll"
AddType application/x-httpd-php .php

You will now want to reconfigure the DirectoryIndex as follows:

#
# DirectoryIndex: sets the file that Apache will serve if a directory
# is requested.
#
<IfModule dir_module>
    DirectoryIndex index.php
</IfModule>

Apache now expects a file named index.php to be present in the root (main) directory of the website.

or

#
# DirectoryIndex: sets the file that Apache will serve if a directory
# is requested.
#
<IfModule dir_module>
    DirectoryIndex index.php
    DirectoryIndex index.html
</IfModule>

Restart Apache

You will have to restart Apache once you have made and saved changes to your config.

A screenshot of the Apache Service Monitor.

Index

Your index.php could be as simple as:

<?php
    echo '<p>Hello World!</p>';

References:

  1. Apache Lounge. (no date) Apache 2 Server on Windows for (business) webmasters, developers, home users and programmers. Available at: https://www.apachelounge.com/ (Accessed: 10 June 2024).

By MisterFoxOnline

Mister Fox AKA @MisterFoxOnline is an ICT, IT and CAT Teacher who has just finished training as a Young Engineers instructor. He has a passion for technology and loves to find solutions to problems using the skills he has learned in the course of his IT career.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.