Tutorial

Why do I want one of those?

If you are developing in a language like php, or are using tools like websockets, it is beneficial to have a local test environment before you push updates to the production server.

Many web design softwares have built in methods for pushing to a remote server, unfortunately I use a laptop, and working without internet sometimes is a must, which is what led me to setting up this environment.

We can exploit some quirks of UNIX in macOS to set up an efficient, easy to use system, allowing for rapid switching between projects.

By the end of this walkthrough you should have a command you can run in your working directory, and it will be served to you in realtime, meaning any edits you make, you see on the next page refresh.

Setting up Apache2

Apache is a free and open source web server, and it has second largest market share of all web servers on the internet. Netcraft found 2.7 million computers use Apache.

This is great, because all macOS machines (be they the iMac or Macbook) come with ‘apache2’ installed. We can use this with some config file edits to set up our web server.

Start by confirming the server can be launched, open ’terminal’¹ and do sudo apachectl start. Fire up ‘safari’ or your other browser-of-choice, and navigate to http://localhost. Should this have gone smoothly, your browser should show the classic Apache, ‘It Works!’ page.

We need to change the directory to apache’s, type in cd etc/apache2/ and that should take you there. A pwd command can verify the directory has changed. This is the point which you must set up your server’s config file! (oh joy oh joy)

Apache Config

Before making any changes, it is good practise to back up the config file. Use cp httpd.conf httpd.conf.bak to create the backup ‘.bak’ file. Now we need to open ‘httpd.conf’ and start editing, I like to use Vim², however the new command line user should use something easier like ’nano’.

Open the file with sudo nano httpd.conf, if you wish to use TextEdit, do sudo open -a textedit httpd.conf.

Navigate to roughly near line 255 to find this block…

Apache2 config segment

DocumentRoot "/Library/WebServer/Documents"
<Directory "/Library/WebServer/Documents">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options FollowSymLinks Multiviews
    MultiviewsMatch Any

    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   AllowOverride FileInfo AuthConfig Limit
    #
    AllowOverride None

    #
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>

We need to make our first edit here, the first two lines ‘DocumentRoot’ and ‘<Directory’ both have a directory to the current web server’s location, we need to change this to a path to your project directory where you will store a very important file.

Edit the path (’/Library/WebServer/Documents’ in the above example) to direct to a file called ‘protolink’ in your projects folder (e.g.~/path/to/project/dir/protolink). Make sure to do this for both ‘DocumentRoot’ and ‘<Directory’.

The ‘important file’ (protolink) is UNIX’s way of symbolically linking files, and we will use this feature to change the working website directory with a bash script later on.

Enabling PHP

To enable PHP (also thankfully installed by default), you need to find the line that reads: #LoadModule php5_module libexec/apache2/libphp5.so, for me it was on line 176. Uncomment the line by removing the ‘#’ at the beginning, save and exit.

To enable other apache extensions, feel free to go wild with uncommenting, it’s the same procedure as what we did for PHP.

To force the config file to update, do sudo apachectl restart, this reboots apache2 and makes it use your new configuration.

This has been very run-of-the-mill so far, so we are now going to do something interesting, and allow for the rapid changing of what site you are prototyping on.

A Useful Bash Script (Where the Magic Happens)

For the new user of command line tools, a lot is going to happen quite fast, so I’m going to shoot first and ask questions later.

Create a script ‘protosite.sh’ in your projects folder. Copy the code below into it and save the file.

protosite.sh example script

#!/bin/bash
rm -f ~/path/to/project/dir/protolink
ln -sf $(pwd) protolink
mv protolink ~/path/to/project/dir/
sudo apachectl restart

We are now going to make this a command (a custom command! isn’t that awesome). Go back to terminal, and make sure you are in the same folder as protosite.sh. Running the command chmod +x protosite.sh makes your script executable. You now need to move the file to your ‘bin’ directory (so it can be run by you from anywhere).

Ensure you have a local ‘bin’ folder by doing mkdir ~/bin/, you can then proceed by doing the following command to move the script to the ~/bin/ folder: sudo mv protosite.sh $HOME/bin/protosite. We now need to modify our path to include our bin folder, this can be achieved by the command: sudo nano /etc/paths. When the editor opens up, add ‘~/bin’ to a new line.

You should now be able to run protosite in any of your project dirs, and the web server will update accordingly to use that project!

A lot happened there very fast, so what did you just do?

Although very simple, we created a bash script, made it executable, and then added it to our Path, which allows it to be run anywhere on your computer.

The script works as follows:

1. The First line is a ‘Shebang’, it’s a convention so the *nix shell knows what kind of interpreter to run.

• We then force a deletion of the old ‘protolink’ symbolic link.
• We create a symbolic link (ln -sf target-dir symlink-name).
• We move the symlink to a our project dir, where our web server is looking.
• We force the server to restart to it can refresh and look at the correct directory.

Testing

To verify your server now supports PHP, you can run in your project directory, this creates a PHP page which outputs all the information on what PHP you have installed. echo '<?php phpinfo();' > phpinfo.php This works by ‘piping’ the output of the echo to a php file, which is created on run of the command. We now use our new command protosite to direct the web server to our folder. Access your server at http://localhost/phpinfo.php to confirm PHP is working as expected.

Software

I generally work with Dreamweaver a lot, the only problem is Dreamweaver costs money 😭. I suggest for the newcomer who wants to use an open-source ware, to use NVU, as it comes highly recommended from a lot of sources.

Another classic piece of software is Netbeans by Oracle. Do some reading around to make sure you have the software you want before downloading.

Done!

And that should be it! It was a bit of a rambly, long journey but now you have a nice, usable environment where you can test your websites and switch between projects easily.