Working on your website locally means having the files that make your website tick right there on your computer. It’s common those files live in a version control repository. You work on them, and push them up to the repo when you are ready. Other people work too, and you pull their changes back down.
What might not be in that repo, are images files from the CMS. WordPress is a classic example of this. When you upload an image in WordPress, it does a whole song and dance. It gets uploaded to the `uploads` folder, multiple versions are created, even the database is updated and attachment meta data happens. What doesn’t happen is that a version control commit happens with all those files.
There are ways to make sure you have those files. You could write a script to pull them down. You could manually FTP it once in a while. In WordPress land, there are plugins that help, like WP DB Migrate Pro, which not only does the database but can move images as well.
But you might not even want to deal with images. Perhaps:
- You don’t want the images in your repo. Maybe the repo is just a theme folder and it makes sense to leave it that way.
- You have like 10 GB worth of images and it’s impractical and unnecessary to move them around.
I think that’s totally legit. A publication-style site probably doesn’t need every single image they’ve ever uploaded as part of their main repo.
OK, enough explanation. You get it.
Sean Lange talked about this exact thing in his 2013 article Using Remote Image Files When You Develop Locally. His solution was to rewrite local URL’s at the web server level to point to the production files:
I found my answer in Apache URL rewrite rules. When the Apache program handles incoming web page requests, rewrite rules allow it to change URLs matching certain patterns — for example, they can turn requests for the ‘files’ directory on your local machine into requests for remote URLs on the production server.
Here’s his Apache rewrite rules:
RewriteEngine on
# Force image styles that have local files that exist to be generated.
RewriteCond %{REQUEST_URI} ^/sites/([^\/]*)/files/styles/[^\/]*/public/((.*))$
RewriteCond %{DOCUMENT_ROOT}/sites/%1/files/%2 -f
RewriteRule ^(.*)$ $1 [QSA,L]
# Otherwise, send anything else that's in the files directory to the production server.
RewriteCond %{REQUEST_URI} ^/sites/[^\/]*/files/.*$
RewriteCond %{REQUEST_URI} !^/sites/[^\/]*/files/css/.*$
RewriteCond %{REQUEST_URI} !^/sites/[^\/]*/files/js/.*$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://www.example.com/$1 [QSA,L]He’s working with Drupal through MAMP, but so long as you’re using Apache locally it’s all just a variation on the same idea. Match URL’s that point to the assets you want to target, rewrite them to the live site.
He was able to paste those rules into a little box in MAMP that handles it. I’m running WordPress locally through a little Docker setup, so I went for just editing my `.htaccess` file directly, and kinda simplified it for my needs:
RewriteCond %{REQUEST_URI} ^/wp-content/uploads/[^\/]*/.*$
RewriteRule ^(.*)$ https://css-tricks.com/$1 [QSA,L]Works great for me! Here’s a visual explanation:
Argh been meaning for this or something on these lines. Always switching assets to and throw was a real pain that wasted many minutes. Will keep an eye out on this.
This is awesome. I just started doing a redesign of a WordPress site and can skip over copying 6GB of images into my local machine.
Thanks a bunch.
For Drupal, there’s also a module that’s a lot simpler to use than adding the rewrite rules (and it works in a lot more situations): https://www.drupal.org/project/stage_file_proxy
It’s also easy to configure per-environment, if you have more than just local and production.
For NGINX I use this:
https://gist.github.com/chuckreynolds/35bcec4323d314a7fff5a1d3fcd357bd
I faced the same problem couple of years back, and built this litte chrome plugin. works with all kinds of web servers :)
https://github.com/amritb/LocalAssets
Thanks for this Chris. It didn’t work for me using WordPress locally on ServerPress but I found the following code at http://rzen.net/serve-missing-media-production-apache-nginx/ which did:
RewriteCond %{REQUEST_FILENAME} !-f [NC]
RewriteRule ^(.*.(js|css|png|jpe?g|gif|ico|svg)) http://server.com/$1 [NC,P,L]
Same here! Thanks for the link, Chris’ code didn’t work for me as well, and I’d love to know why :-/ I’ve searched the whole internet but didn’t find a solution…
In some cases, you need to add a resolver to get the proxy_pass to work, e.g.
A colleague of mine created a WordPress plugin that handles images automatically when working locally – https://wordpress.org/plugins/coral-remote-images/
Thanks for the plug, Daryn!
My plugin above allows you to not have to change anything in the database. Most sites we build we just override the URL via wp-config.php (WP_SITEURL and WP_HOME)… the plugin assumes this and makes some educated guesses, and only applies if the URL mismatches what’s in the DB. You can also override it with a constant.
Not sure how it’d handle multisite, though. Next steps!
When working on a local environment, why not just edit your hosts file to point your domain to localhost? Then the paths never change.
Yep, I’m using this method too, but you can’t detach the uploads folder if the domain in your hosts file is the same as the production domain. Another problem, you won’t be able to upload any new files, when you have detached your uploads folder.
What happens when you develop locally and you are offline? (E.g. while travelling)
That’s an interesting situation well-worth finding solutions for. Perhaps you can put something in place that blocks those requests so they don’t sit there spinning/failing. Perhaps you can spin up a local server that takes any image request and returns placeholder graphics, and re-route requests to that.
Jonas Merhej wrote in to say:
You could simply use a browser extension like https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii?hl=en to point to your production pics. i use it all the time to test against production content
Would be useful if this included a web.config version for IIS projects.
Two things that could prevent this from working:
This rewrite block needs to come before the
# BEGIN WordPressblock.For sites whose upload directories are not organized by year/month folders, the regex needs a
?after the second/.So it should be: