Software development, photography, jokes, ....

Sites by me

 
tas-logoTransportation Administration System
snoezelkussen-logo-kleinstSnoezelen Pillows for Dementia
ikzoekeenbegeleider-logoBegeleiders voor gehandicapten
Laat uw hond het jaarlijkse vuurwerk overwinnen
Betuweroute en Kunst
logo 50x50Hey Vos! Je eigen naam@vos.net emailadres?
Kunst in huis? Nicole Karrèr maakt echt bijzonder mooie dingen
nettylogo2Kunst in huis? Netty Franssen maakt ook bijzonder mooie dingen
Professionele opvang bij Gastouderbureau
Kind-Zijn
Salarisadministratie en belastingadvies bij
De Zaak Loont
Zutphense Bomenstichting

Hosting Favorites

 
ANU Internet Services
XelMedia .internet services
register.com
GoDaddy.com

Blogroll

 
Bomenstichting
MacFreak
Google Translate
PHP
MySQL
jQuery
jQuery UI
codecademy
YourHead Stacks API
Favicon Generator. For real.
Check HTTPS problems



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 a previous version of macOS X, not to worry, the steps to take are practically identical.

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