3 Ways to Bring Back Web Sharing in OS X Mountain Lion

With the introduction of OS X Mountain Lion, a feature that didn’t make the cut was Web Sharing. It may not have been widely used but for developers it served as a quick way to host a website. Let’s take a look at three different ways to bring this feature back.

Requisite Definitions

While what we are going to look at will be suitable for beginners to advanced users, some may not know some particular meanings or software.

• Apache – An open-source HTTP server software that is the most widely used HTTP server available and is used on tens of millions of servers around the world.
• Localhost – A network term referring to the local host (the computer that you’re operating on). When running a web server, you’ll usually access sites via http://localhost. Your Mac can only access sites it is running using localhost, so if you try to use this address anywhere else, it won’t work. However, you can substitute your Mac’s IP address for localhost. If you want to view a site from another Mac, simply substitute localhost with its IP address.
• MySQL – The most popular open-source database.
• PHP – An open-source server-side scripting language. Software such as WordPress, Joomla and Drupal use both PHP and MySQL.
• Ports – Both Apache and MySQL use something called a port. The purpose of ports is to uniquely identify different applications or processes running on a single computer. When you visit a website through your browser, you’ll usually be using port 80 which is the standard port for Apache. When you visit a site such as http://mac.tutsplus.com – what actually loads is http://mac.tutsplus.com:80. Give it a try, go to any address and :80 to the end of it and it’ll load as normal. Try another random number and it’ll probably not work. For the purposes of this tutorial we aren’t really going to be delving into this in great detail, but it’s worth getting to know!
• Stack – A collection of tools designed to work together to create a common environment. A common stack is LAMP – Linux, Apache, MySQL and PHP. All of these tools provide the foundation for a fully operational web server.

Anvil

Cost: Free

Anvil is a menubar application that allows you to quickly set up test environments for static HTML and Rack apps. Whenever you add a project, you specify the address name, which will be suffixed with .dev. You can access this on your Mac a lot quicker than an address containing all sorts of slashes and characters.

Anvil is actually a graphical interface for a command-line application called Pow. Pow is what powers Anvil and provides the ability to create websites on your Mac that you can access locally using a .dev domain name. Since Pow is a really useful tool for folks that might not be too savvy in Terminal, Anvil makes setting it up a breeze.

Since it’s designed to set up multiple environments, not only is it a great way to quickly set up simple web sharing, but you can have as many sites as you want running.

Installation

1. Download Anvil from the Anvil for Mac site.
2. Drag the app to your Applications folder and open it.

That’s Anvil installed!

Setup

As Anvil requires Pow, when you first load it, you’ll see the option to install Pow before you start using it. When you click install, you’ll see Terminal open and some magic happen.

Anvil requires a tool called Pow to run

Don’t worry, Anvil is taking care of this for you. You’ll need to enter your password within the Terminal window when prompted and then press enter. Once it’s installed, quit Terminal and you’re ready to go!

Pow installs via Terminal but don’t worry, it’s painless!

When Pow is installed, Anvil will report that it’s ready to go.

Usage

To add a new site, simply click the “Add a site” button and select a folder where your HTML files are located. If you choose a blank folder, Anvil will create a sample index.html for you.

Sites are listed under the Anvil menu bar

Anvil will then ask you to confirm a name for the site, followed by .dev. Go to this URL in your browser and that’s it! You can then repeat these steps to add as many sites as you need to.

Once a site has been created within Anvil, you’ll be able to open it in your browser

MAMP

Cost: Free (Pro version available)

If you’ve spent any time in web development or managing a web server, then chances are you’ve come across something called LAMP. MAMP is just the Mac equivalent – Mac, Apache, MySQL and PHP. While it can be argued that PHP and even MySQL may not even be required for a web server to work (and indeed for static HTML content with a little Javascript, they aren’t), Apache, MySQL and PHP are the cornerstones of modern web development. PHP is the most common web development language and MySQL the most common database.

Sound complicated? Don’t worry, a software company called appsolute have created a Mac app called MAMP that requires no Terminal involvement and is completely self contained.

MAMP provides a full web server platform for your Mac that gives you customization over features such as Apache modules, PHP version and even which ports you want to use (so you could have http://localhost:8888 instead of the usual http://localhost).

Installation

1. Download MAMP from the MAMP site.
2. Drag the MAMP folder to your Applications folder and open it.

Again, installation is a breeze and that’s all there is to it.

Usage

MAMP contains all the necessary files within the MAMP folder. By default, MAMP uses the folder htdocs that’s in the MAMP folder. You then access web sites you create in htdocs with the address http://localhost.

Once you open MAMP, it’s really easy to see what’s what. There’s a traffic light on the left to tell you if Apache and MySQL are running (they aren’t at the moment). There’s a simple start/stop button and an option for preferences.

MAMP Control Panel

MAMP is ready to go!

Hit Start Servers and MAMP will start running, the lights will change from red to green and your browser will open to the address http://localhost:8888/MAMP/?language=English.

MAMP’s start page.

Now, MAMP uses a unique port number for it’s included Apache and MySQL. If you remember in the first part of this tutorial, you’ll know that Apache uses port 80 by default. MAMP actually starts with port 8888. All this means is that you just add :8888 to the end of http://localhost.

Remove the /MAMP/?language=Englishfrom the URL and press enter. You’ll get a default page saying everything is running and working. http://localhost:8888 is the htdocs folder. Add files and folders in there and access them through your browser.

MAMP’s default page in htdocs.

Preferences

Start/Stop

The first option displays basic features. We can choose whether we want MAMP to start automatically when we open the app as well as if it should shut down when we close it. This is handy as we can make sure that as long as the MAMP application is running, we know the web server is.

MAMP Preferences

Ports

MAMP uses it’s own ports which can be useful for development. If you’d prefer to use the default ports, then you can click the button to do that. Keep it as it is for now.

The purpose of ports is to uniquely identify different applications or processes running on a single computer. When you visit a website through your browser, you’ll usually be using port 80 which is the standard port for Apache. When you visit a site such as http://mac.tutsplus.com – what actually loads is http://mac.tutsplus.com:80.

MAMP Preferences

PHP

You can specify which version of PHP you wish to use, either PHP 5.2.x or 5.4.x. Why would you want to do that? For developers, they may have written a PHP application in 5.2 that doesn’t work in 5.4. Alternatively, PHP 5.2 is more widely used and stable, PHP 5.4 is still fairly new (as you’ll see from the number of versions in the 3rd part of the version number).

Apache

Here you can specify which folder to use as the default folder to host all your files. By default this is the htdocs folder. You can specify somewhere else if you wish.

MAMP Preferences

Additonal Extras

MAMP comes with some great tools built-in that’s accessible by the MAMP start page you see when you start MAMP or you can view at any time by clicking Open start page in the MAMP app.

PHP Info

Gives you information on your PHP version and what features are available.

XCache

Manages your PHP setup to provide some useful caching tools to increase PHP speed and reduce CPU load.

PHPMyAdmin

A very popular web-based interface for managing MySQL databases.

SQLite Manager

If you prefer to use SQLite instead of MySQL then this tool is also included.

MAMP PRO

There’s a paid-for professional version of MAMP called MAMP PRO. It provides additional features such as being able to specify hostnames for each site on your Mac so instead of using http://localhost/wordpress you could use http://wordpress.dev or anything else you wanted. There’s also greater control on the modules Apache will use and more control over PHP. For just getting a site up and running, MAMP is more than enough. You can download a free trial of MAMP PRO which also includes MAMP anyway.

MAMP PRO provides more features than MAMP at a small cost.

Dropbox

Cost: Free

“Wait, what? Isn’t Dropbox a file syncing utility?” Well, yes it is! However, Dropbox includes a very useful feature if you need to infrequently have a simple HTML site accessible. If you’re working on a small site with no large files, then it can prove handy when you’re in a pickle. To do this, we are going to take advantage of the Dropbox Public folder.

Dropbox contains a handy Public folder that anyone can access from anywhere with the right URL.

Files in this folder are accessible over the web provided you know the special URL you’re provided, which is based upon http://dl.dropbox.com/u/0000000/filename.html (where 0000000 is actually your unique Dropbox User ID). Unlike sharing a file which provides a unique and randomly creative link to that file only, using your Public folder allows you to run a small and simple website as any files within your Public folder will start with http://dl.dropbox.com/u/0000000.

Setup

Setup requires a Dropbox account. If you don’t have one, you can sign up here and download the Dropbox app.

Dropbox accounts created after October 4, 2012 will not have a Public folder. All accounts created before that date will contain a Public folder. Don’t worry if you only just created your account, you can use this special link to enable the Public folder. While Dropbox is moving people away from the Public folder since they introduced new sharing features, you can still create one if you wish.

Usage

Step 1: Create a folder in your Public folder called “mactutsrules”, or whatever you prefer.

Step 2: Create a new document in TextEdit and enter the above (ensure that under the Format menu in TextEdit, the document is plain text).

Step 3: Save the document in your “mactutsrules” folder as index.html (when prompted, select “use .html” as the file extension).

Step 4: Visit Dropbox and log-in. Go to your “Public folder” and then into your “mactutsrules” folder, followed by right-clicking on the index.html file.

Step 5: Copy that link and paste it into a new browser tab/window. If all has gone well, you should see “Mactuts Rules!” in your browser!

Now, there are some caveats with Dropbox web hosting…

1. You can’t just enter the first part of your public link and expect it to automatically point to an index.html file – you have to specify it.
2. No server-side scripting. This means no PHP or MySQL. If you ever used MobileMe for web hosting, it’s the same restrictions.
3. You need to be connected to the Internet so your Dropbox files sync to the cloud.

For a quick way to get a site up, it’s great.

Wrapping Up

There are still a few other methods we didn’t take examine. For example, Mountain Lion does still ship with Apache built-in so using some Terminal trickery, you could work up a solution. I wanted to steer clear of this so those uncomfortable with using Terminal can still see what options are available. Although Apache may be installed, services like PHP and MySQL would require additional work to install so using something like MAMP is a much easier (and in my opinion, better) solution than the built-in options of OS X.

Do you know of any other ways to run web sharing within Mountain Lion? Were you affected by the removal of the feature when upgrading? Let us know in the comments!