Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I usually set up a local environment with the website running on my machine when I'm going to develop new functionality with JavaScript. The same goes for updating stylesheets.

When there's no easy way getting the production site to run locally, I would still prefer editing files locally and "preview" them against the live site. Something like this:

  • A local web server that serves the assets (css and js)
  • Some way to make the live website load assets from my local web server. (Greasemonkey, proxy)
  • Livereload that watches my local files and refreshes the live site on change.

I need feedback on the seconds step. Greasemonkey is only for Firefox, that makes it hard to test cross browser functionality. A proxy is a lot of work... :)

Have anyone tried something similar, maybe theres a smart tool for this?

share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

To redirect requests for assets on your local machine only

To get your local machine to use local files for certain JavaScript or CSS assets requested from a remote server, you could use an HTTP proxy/interception tool such as Charles. (Mac, Windows, and Linux. 30-day demo, then $50 to buy.)

To set up Charles to listen for remote requests and serve local files instead, follow these steps:

  1. Download Charles.

  2. Launch Charles and, when prompted, let it modify your proxy settings.

  3. Visit the website you're testing in your browser. I'm using Chrome to visit Google in this example.

  4. Find the website in Charles' 'structure' window in the left pane, then drill down through the folders to the requested asset you want to modify. I'm using Google's logo in this example.

    find the site in Charles' structure window

  5. Second-click the asset and choose 'map local' from the options:

    mapping to a local file

  6. Choose the file you want to load from your local filesystem instead of the remote asset:

    map a remote file to a local one

  7. Repeat for as many assets as you want to remap.

  8. Force refresh your browser. You should find the assets are loaded from your local machine instead of the remote one.

To 'unmap' local files so that the remote ones are loaded again, follow these steps:

  1. Choose Tools > Map Local from Charles' menu:

    enter image description here

  2. Click the rule[s] you wish to remove from the list, then click the 'remove' button:

    enter image description here

There are free applications available which will let you do the same thing, such as WebScarab and Burp suite, but neither are as simple or beautiful to use as Charles, in my opinion.

The rest of this answer concerns the steps to take if you'd like a remote web server to load files from your computer for all users who visit the remote site. (Possible example use case: showing work to clients/colleagues when you can't reproduce the production site locally or stage a development server.)

To redirect requests for assets on all machines

To serve certain assets from your local machine for all machines accessing another remote web server, you can set up your local server to be accessible from the Web. A couple of options:

Localhost tunnelling services

These services help you share localhost over the web to make assets or entire sites available via a web address:

Showoff.io and Tunnlr are paid services at $5/month. Localtunnel is currently free.

Dynamic DNS

A free alternative is to use dynamic DNS hosting from a service such as afraid.org to point a web address at the webserver running on your local machine. Here's how it works:

  1. Sign up at afraid.org.

  2. Click the link in the email they send to activate your account and automatically log in.

  3. Set up a new subdomain, which you'll use to access your localhost from the web. You can choose one of their free domains (such as 'mooo.com'); there's no need to register your own.

  4. Download one of the many dynamic DNS applications for your operating system.

  5. Run the application, which publishes your IP address to the afraid.org servers.

  6. Set up a server to run on port 80 of your local machine, and allow traffic through port 80 on any firewalls you're running. How you do this depends on your operating system and hardware. (If you're using Mac OS X, for example, you need only turn on 'Web Sharing' in your System Preferences>Sharing pane.)

  7. Visit the subdomain you created in step 3 in your web browser. (e.g. yourname.mooo.com). The name will be resolved to your machine's IP address and -- if you've configured your server and firewall correctly -- you should see the index file from your local machine.

You can then access assets in the public folder on your local machine over the web by using the full path to those assets with the afraid.org subdomain you created. For example: yourname.mooo.com/~yourMacUsername/images/hurrah.jpg Naturally, you can reference that URL from another server to have it load files from your local machine.

[On the Mac, the public folder is the 'Sites' folder in your user directory. To access it, use your IP address or hostname followed by a tilde (~) and your Mac username. Other servers and operating systems work slightly differently.]

share|improve this answer
    
Hi Nick and thanks for your through answer. I see I wasn't clear enough formulating my question though. :( I do not want to change the behavior of the production server. I would only like to change the assets on the client side (eg. greasemonkey) or in some other way. Put in other words: no one else than me should see the changes i make until i deploy them. But i want to preview them on the live site. Like in Firebug but in a more persistent way and cross browser. –  Sven Nov 8 '11 at 12:17
    
@Sven Ah! I misunderstood your question. Thanks for clarifying. I've updated my answer with instructions on using Charles, a very handy and easy-to-use proxy tool, to remap remote files to local ones exactly as you ask. (The new info. is at the top of my answer.) –  Nick Nov 8 '11 at 14:02
    
This is awesome, thanks Nick! I did now know about Charles so I'll have to check it out. Don't have enough reputation to up vote though, sorry. :( –  Sven Nov 8 '11 at 14:38
    
@Sven No problem! Glad it was useful. Charles is great. –  Nick Nov 8 '11 at 14:41
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.