Chisel A WordPress Development Framework

Wildcard virtual hosts

This step is optional but highly recommended if you develop WordPress projects

It will ensure that each new local development domain will work out of box on your computer and you won’t have to edit hosts and httpd-vhosts.conf files every time. This is achieved by setting up wildcard virtual hosts and DNS.

macOS

Throughout this guide we assume that your username is developer and you store your projects inside ~/Projects directory.

Based on awesome tutorial from Chris Millinson.

This tutorial assumes you have MySQL and Apache installed (they come by default with macOS). If you use MAMP, use it as you like, but this tutorial aims for built-in Apache & MySQL setup. You can find additional information about where MAMP stores its config files in this article

Make sure you have Xcode (xcode-select --install) and brew installed.

1. Install and setup dnsmasq

This is for *.test domain wildcarding

brew install dnsmasq
cd $(brew --prefix); mkdir etc; echo 'address=/.test/127.0.0.1' > etc/dnsmasq.conf
sudo cp -v $(brew --prefix dnsmasq)/homebrew.mxcl.dnsmasq.plist /Library/LaunchDaemons
sudo launchctl load -w /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist
sudo mkdir /etc/resolver
sudo bash -c 'echo "nameserver 127.0.0.1" > /etc/resolver/test'

2. Edit /etc/apache2/httpd.conf

Uncomment the line (remove #):

LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so

3. Edit /etc/apache2/extra/httpd-vhosts.conf

Add VirtualHost config

Reminder – we are assuming your username is developer and your store projects inside ~/Projects directory

<VirtualHost *:80>
  ServerAlias localhost *.test
  VirtualDocumentRoot /Users/developer/Projects/%1/wp # Chisel stores WP inside wp folder in the root of your project
  UseCanonicalName Off
  <Directory "/Users/developer/Projects">
    Options FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
    Require all granted
  </Directory>
</VirtualHost>

4. Restart Apache

sudo apachectl restart

Linux

Follow the article here: http://brunodbo.be/blog/2013/04/26/setting-up-wildcard-apache-virtual-host-wildcard-dns

Windows

1. Install and setup Acrylic DNS Proxy

This is for *.test domain wildcarding

Download and install Acrylic DNS Proxy, then set it up at your system, eg. Windows 10

Add 127.0.0.1 *.test to AcrylicHosts.txt file so it looks like:

127.0.0.1 localhost localhost.localdomain
::1 localhost localhost.localdomain
127.0.0.1 *.test

2. Edit httpd.conf

If you are using XAMP it would be located in c:\xampp\apache\conf. Uncomment the line (remove #):

LoadModule vhost_alias_module modules/mod_vhost_alias.so

3. Edit httpd-vhosts.conf

If you are using XAMP it would be located in c:\xampp\apache\conf\extra. Add VirtualHost config:

<Directory "C:/xampp/xampp/htdocs/">
     Options Indexes FollowSymLinks Includes ExecCGI
     AllowOverride All
     Order allow,deny
     Allow from all 
 </Directory>

<VirtualHost *:80>
    ServerName localhost
    ServerAlias localhost
    DocumentRoot c:/xampp/htdocs/
</VirtualHost>

<VirtualHost *:80>
    ServerAlias *.test
    VirtualDocumentRoot c:/xampp/htdocs/%-1/%-2+/wp #notice wp at the end, that's because Chisel serves WP from a subfolder
</VirtualHost>

4. Restart Apache

Restart Apache from the XAMPP control.

You’re all set up!

Now your projects inside ~/Projects directory (c:\xampp\htdocs\test on Windows) will directly map to *.test host, so:

  • /User/developer/Projects/testproject (c:\xampp\htdocs\test\testproject) will be available under http://testproject.test
  • /User/developer/Projects/mywork (c:\xampp\htdocs\test\mywork) will be available under http://mywork.test

And so on. Chisel will set up BrowserSync proxy for you under your-project-name.test address. It’s advisable that you name your project (during yo chisel command) exactly the same as the directory you’re in, so there’s no need for you to configure anything.

Craftsmanship and Work Ethics of Old Masters

Xfive - Developers who care

For more than a decade we’ve been helping creatives bring their visions to life in the digital world.

Xfive is a partner for design and web agencies looking to expand their capacity in web application development where care is the foundation of everything we do.

Work with us