WeaverCast 16 - Preview using MAMP and LiveReload

In this show we go over how to preview your RapidWeaver projects that may contain PHP without having to publish your website. This is accomplished using MAMP and LiveReload.

Show Links

I should note that MAMP v3.0 was released after I recorded this podcast. The UI for MAMP was cleaned up a lot. It was a great update. All of the functionality that I reviewed in the podcast is still there but I wanted to make sure that everyone knew that the UI has changed.

Why would I want to preview outside of RapidWeaver?

If you have been using RapidWeaver for any amount of time, chances are that you have ran into a stack or add-on that you cannot preview within RapidWeaver because it was using PHP. The only way to view this content is to view it via a web server.

We can’t always publish the site to our web servers, especially if you don’t have a test domain setup. Luckily MAMP is here to the rescue. MAMP is a free application that allows you to setup a local web server with a single click!

Previewing your site in MAMP

  1. Export you RapidWeaver project to a local folder (File -> Export Site or shift-cmd-E)
  2. In MAMP preferences, configure the Document Root in the Apache tab to point to the same folder that you exported your RapidWeaver project into.
  3. Click on the “Start Server” button in MAMP.
  4. Open a web browser go to http://localhost:8888/

Quickly preview changes with LiveReload

Now that we have MAMP setup, in order to see your new changes, you simply need to re-export your website to the same folder again. Then refresh your web browser.

However, LiveReload is a great app that can auto-detect for changes in a folder and then automatically refresh your browser for you.

Here are some steps for getting LiveReload setup.

  1. Add the folder that we exported our RapidWeaver project to watch in LiveReload’s left pane.
  2. Click on the “Install Browser Extensions” and install the browser extension for your browser.
  3. Open our website hosted by MAMP that we setup earlier.
  4. Click on the LiveReload extension icon that was added to your browsers menu bar. This will cause LiveReload to actively watch for changes.
  5. Make changes and re-export your RapidWeaver project.
  6. You should see that LiveReload has refreshed the browser and you should see your changes.