How to Set-up a Virtual Host File for Drupal 8 on Wampserver


Introduction:  Drupal Development with Version Control

This Tutorial will show how to set-up a Virtual Host file for Drupal 8 websites as required to run a database on a localhost WampServer environment for Agile web development teams. This Tutorial is for Windows desktop/laptop computers only.

In order for WampServer to function correctly when running local files in a web browser from a localhost database, the Windows hosts file & WampServer Virtual Hosts file must be edited. In order to do this, use a text editor like Notepad++ to preserve formats.

Running Drupal 8 on a local web server is recommended for programming & development, facilitating version control protocols like Git, CVS, Subversion, etc. WampServer is the most popular localhost server for Drupal 8 web development. Then the production server can be hosted as a Drupal hosting service (i.e., a host that supports Drupal).

Step One: Install the Latest Version of WampServer

Download & install the latest version of WampServer from SourceForge or the project homepage. Make sure the latest version is installed on the local Windows environment.

Download Links - WampServer:

The latest WampServer distribution has support for MySQL, PostgreSQL, & MariaDB as well as PHP 7.x pre-installed. These are used to run Drupal 8 locally instead of on a web server in the cloud. Install WampServer & begin to configure the Drupal 8 website.

Installation Guide - WampServer:

Follow the step-by-step installation guide in the link above for a detailed tutorial on installing WampServer on a Windows desktop. There are some important file downloads that must be installed as prerequisites, i.e. the Visual C++ packages.

Step Two: Build the Local Development Environment

The WampServer Installation Guidewill also provide a walk-through of the steps needed to build a Drupal 8 website on a local programming environment.

For the purposes of this Tutorial, the Drupal 8 website files must be installed in the C:wampwww folder with unique names like “site1”, “site2”, etc. for the Vhost file.

How to Set-up a Virtual Host File for Drupal 8 on Wampserver

For the purpose of the Tutorial, we have three folders named as /www.site1.com etc.

How to Set-up a Virtual Host File for Drupal 8 on Wampserver

Install Drupal, WordPress, Joomla, Magento, or other scripts & frameworks in the folders according to the requirements of your projects, where the Vhost files still need configured for each of the websites to run properly in the localhost web browser.

Step Three: Edit the WampServer Virtual Host File

The first part of configuring WampServer for local Drupal 8 website development & programming with version control utilities is to edit the WampServer Vhosts file.

Locate the WampServer Virtual Host file at:

wampbinapacheapache2.4.9confextrahttpd-vhosts.conf

Open the file in a code editor like Notepad++ & add the Virtual Host definition for /www:

<VirtualHost *:80>
     DocumentRoot"c:/wamp/www"
     ServerName localhost
     ServerAlias localhost
     <Directory  "c:/wamp/www">
        AllowOverrideAll
                 Require local
     </Directory>
 </VirtualHost>

Next, for each of the folders in C:wampwww add the following code:

<VirtualHost *:80>
     DocumentRoot"c:/wamp/www/www.site1.com"
     ServerName project1
     <Directory  "c:/wamp/www/www.site1.com">
        AllowOverrideAll
                 Require local
     </Directory>
 </VirtualHost>
<VirtualHost *:80>
     DocumentRoot"c:/wamp/www/www.site2.com"
     ServerName project1
     <Directory  "c:/wamp/www/www.site2.com">
        AllowOverrideAll
                 Require local
     </Directory>
 </VirtualHost>
<VirtualHost *:80>
     DocumentRoot"c:/wamp/www/www.site3.com"
     ServerName project1
     <Directory  "c:/wamp/www/www.site3.com">
        AllowOverrideAll
                 Require local
     </Directory>
 </VirtualHost>

Save the settings & remember to update them appropriately when new websites are added to your local Windows Development environment. Add values for any domain.

Step Four: Edit the Local Windows Host File

Next, the local Windows host file must be located & edited to add the folders from the development environment in C:wampwww for correct URL routing in web browsers.

On your local Windows development computer, desktop or laptop, navigate to:

C:windowssystem32driversetchosts

Open the file (without extension) in Notepad++ & add the following code:

127.0.0.1localhost
127.0.0.1www.site1.com
127.0.0.1www.site2.com
127.0.0.1www.site3.com

 ::1 localhost
 ::1 www.site1.com
 ::1 www.site2.com
 ::1 www.site3.com

Save the file and make sure an extension is not added like .txt or .php, otherwise, it will not operate correctly as a Windows system file.

Next open Windows Command Prompt and run the following commands:

net stop dnscache
netstart dnscache

This command reloads the DNS Cache, so that the new settings will be available to WampServer on the localhost. Restart WampServer and finish the configuration.

Step Five: Edit the httpd.conf File for Apache Web Server

For the last step, locate each project in WampServer administration menus and open the httpd.conf file for Apache Web Server in Notepad++ to edit the configuration.

Search the httpd.conf file for the following line:

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

Uncomment the # before #Include… and save the file. Then restart WampServer and the configuration for each website hosted on the localhost dev environment is set.

For more advanced configurations, reference this Tutorial for a step-by-step guide on adding a custom menu button for “My Virtual Hosts” to WampServer for monitoring.

Conclusion: Avoid Problems with PHP Code in Development

The main advantage of running the localhost web development files & database under this format on Windows is that the PHP environment will be equivalent to a live server.

WampServer can be used in Drupal 8 web development for local programming with site files transferred using version control standards like Git, Subversion, CVS, etc.

Check out these top 3 Drupal hosting services:

Was this article helpful?