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:
- SourceForge: (download files)
- Secondary Repository: (download files)
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.
For the purpose of the Tutorial, we have three folders named as /www.site1.com etc.
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:
- Click this link and all your queries to best hosting will end.
