: How do I get a production website to load assets from local web server? I usually set up a local environment with the website running on my machine when I'm going to develop new functionality

@Jessie594

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 to buy.)

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


Download Charles.
Launch Charles and, when prompted, let it modify your proxy settings.
Visit the website you're testing in your browser. I'm using Chrome to visit Google in this example.
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.


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


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


Repeat for as many assets as you want to remap.
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:


Choose Tools > Map Local from Charles' menu:


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




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
Tunnlr
Localtunnel


Showoff.io and Tunnlr are paid services at /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:


Sign up at afraid.org.
Click the link in the email they send to activate your account and automatically log in.
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.
Download one of the many dynamic DNS applications for your operating system.
Run the application, which publishes your IP address to the afraid.org servers.
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.)
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.]

Vote Up Vote Down