Marc's Place

 

Setup your local macOS X web server

If you are a web developer, you sure do want to use the macOS X built-in web server, Apache, on all your Macs. And you want to be able to access your Sites folder, local web documents folder and your other Mac via HTTP.

Read on ... I'll describe how to set it up on macOS High Sierra (10.13.5). If you're on another version of macOS, not to worry, the steps to take are practically identical.

Tweet



I have 2 Macs - an iMac and MacBook Pro - and I use them both for web development. My iMac had a fusion drive, but I split it into two and replaced the 3TB HDD with an 2TB SSD. I then had to move my 'Sites' folder onto this new SSD, because the Apple SSD is only 240GB. Furthermore, I moved the Sites-folder into Dropbox on both Macs, so I don't have to setup some kind of timely mirroring with SVN, ChronoSync, or something similar. My iMac is my central hub from where all files are being distributed: to Dropbox, to SVN and to iDrive backup.

So how have I setup my environment?

• I use the default web server folder for all general media, like jQuery, TinyMCE, Fontawesome, CSS-files, images and other/my own Javascript-files.
• I use the ~/Sites folder under my user to store all websites, Rapidweaver files, Sublime-text project files, PHP-function libraries, etc.
• I have created some other folders, like /var/php/ and /var/py/ where I stro my own PHP- and Python functions.
• I name my Macs with type and year: IMAC2012 and MBP2013.

To test my web sites on ~/Sites, I use http://localuser/[site-folder]/.
For the default web documents folder, I use the default host http://localhost/.
And to access my iMac from my MacBook Pro, I use http://imac2012/[site-folder]/, and the other way around is http://mbp2013/[site-folder]/

Paths

iMac:

localhost -> /Library/WebServer/Documents/
localuser -> /Volumes/Data HD/Dropbox/Sites/	(illustrates the use of a second disk)
imac2012  -> /Volumes/Data HD/Dropbox/Sites/

MacBook Pro:

localhost -> /Library/WebServer/Documents/
localuser -> /Users/marcvos/Dropbox/Sites/
mbp2013   -> /Users/marcvos/Dropbox/Sites/

So, how do you set this up?

1: /etc/hosts

First, edit your /etc/hosts file on both Macs and add the localuser-domain below the localhost-settings:

$ sudo vi /etc/hosts

127.0.0.1 localuser
fe80::1%lo0 localuser

192.168.1.13 imac2012
192.168.1.130 mbp2013

(replace the two IP-addresses 192.168... with your local IP-adresses and use the names of your own Macs)
Save the file.

Now your Mac knows the other Mac by name, system wide.

2: /etc/apache2/extra/httpd-vhosts.conf

Next, setup the domains (aka virtual hosts).
These settings are stored in /etc/apache2/extra/httpd-vhosts.conf:

First, Mac nr. 1, my iMac:

$ sudo vi /etc/apache2/extra/httpd-vhosts.conf

<Directory "/Library/WebServer/Documents/">
    Require all granted
    AllowOverride All
    Options +Indexes
</Directory>

<VirtualHost *:80>
    ServerName "localhost"
    DocumentRoot "/Library/WebServer/Documents"
    Header set Access-Control-Allow-Origin "*"
</VirtualHost>

<Directory "/Volumes/Data HD/Dropbox/Sites/">
    AllowOverride All
    Options +Indexes
    Require all granted
</Directory>

<VirtualHost *:80>
    ServerName "localuser"
    ServerAlias "imac2012"
    DocumentRoot "/Volumes/Data HD/Dropbox/Sites"
    Header set Access-Control-Allow-Origin "*"
</VirtualHost>

Save the file.

The line Header set Access-Control-Allow-Origin "*" is necessary, because only then you can use CSS-files, JS-files and images from http://localhost/ when you're on http://localuser/ and vice-versa.

Next, the other Mac, my MacBook Pro:

$ sudo vi /etc/apache2/extra/httpd-vhosts.conf

<Directory "/Library/WebServer/Documents/">
    Require all granted
    AllowOverride All
    Options +Indexes
</Directory>

<VirtualHost *:80>
    ServerName "localhost"
    DocumentRoot "/Library/WebServer/Documents"
    Header set Access-Control-Allow-Origin "*"
</VirtualHost>

<Directory "/Users/marcvos/Dropbox/Sites/">
    AllowOverride All
    Options +Indexes
    Require all granted
</Directory>

<VirtualHost *:80>
    ServerName "localuser"
    ServerAlias "mbp2013"
    DocumentRoot "/Users/marcvos/Dropbox/Sites" (MBP)
    Header set Access-Control-Allow-Origin "*"
</VirtualHost>

Save the file.

3: /etc/apache2/httpd.conf

Then, on both Macs, you need to enable both virtual hosts, so Apache knows about them.
Therefore, you need to modify settings inside the Apache configuration file:

$ sudo vi /etc/apache2/httpd.conf

Look for the line:

#Include /private/etc/apache2/extra/httpd-vhosts.conf

and remove the # to uncomment it.

At the same time you might want to uncomment the following line too:

#LoadModule php7_module libexec/apache2/libphp7.so (php5 on older macOS versions)

so you can serve PHP webpages locally.

4: Start Apache

Then start Apache:

$ sudo apachectl start

And last, setup Apache to start when your Mac starts:

$ sudo defaults write /System/Library/LaunchDaemons/org.apache.httpd Disabled -bool false

Conclusion

Now, when I am working on my MacBook Pro, in Parallels for example, I can access webpages on my iMac with http://imac2012/
And the other way around, when I am working on my iMac, I can access webpages on my MacBook Pro with http://mpb2013/

On the Macs themselves, I always work in http://localuser/[website-folder]/ and retrieve central used media from subfolders (/css, /js, /img) in http://localhost/media/

Happy developing!

---

© 1997- Marc Vos (and others)   -   Privacy Statement   -    Contact Me

On this website, Google Analytics is used to track visitor statistics. These are anonymised data about the number of visitors, which pages they visit on this site, from which regions they visit, which web browsers they use, etc.. You will also see non-personalised ads via Google AdSense. Cookies from Paddle or Paypal are placed when you click on a 'Buy now!' or 'Donate!' button, and possible cookies from Disqus when you use that system to comment on one or more blogposts.
Privacy Statement

Dismiss