{"id":249348,"date":"2016-12-29T06:37:08","date_gmt":"2016-12-29T13:37:08","guid":{"rendered":"http:\/\/css-tricks.com\/?p=249348"},"modified":"2016-12-29T06:37:08","modified_gmt":"2016-12-29T13:37:08","slug":"develop-locally-use-images-production","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/develop-locally-use-images-production\/","title":{"rendered":"Develop Locally, Use Images from Production"},"content":{"rendered":"<p>Working on your website locally means having the files that make your website tick right there on your computer. It&#8217;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. <\/p>\n<p>What might <em>not<\/em> 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 <em>doesn&#8217;t<\/em> happen is that a version control commit happens with all those files.<\/p>\n<p><!--more--><\/p>\n<p>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 <a href=\"https:\/\/deliciousbrains.com\/wp-migrate-db-pro\/\" rel=\"noopener\">WP DB Migrate Pro<\/a>, which not only does the database but can move images as well. <\/p>\n<p>But you might not even <em>want<\/em> to deal with images. Perhaps:<\/p>\n<ul>\n<li>You don&#8217;t want the images in your repo. Maybe the repo is just a theme folder and it makes sense to leave it that way.<\/li>\n<li>You have like 10 GB worth of images and it&#8217;s impractical and unnecessary to move them around.<\/li>\n<\/ul>\n<p>I think that&#8217;s totally legit. A publication-style site probably doesn&#8217;t need every single image they&#8217;ve ever uploaded as part of their main repo.<\/p>\n<p>OK, enough explanation. You get it.<\/p>\n<p>Sean Lange talked about this exact thing in his 2013 article <a href=\"https:\/\/www.lullabot.com\/articles\/using-remote-image-files-when-you-develop-locally\" rel=\"noopener\">Using Remote Image Files When You Develop Locally<\/a>. His solution was to rewrite local URL&#8217;s at the web server level to point to the production files:<\/p>\n<blockquote><p>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 &#8212; for example, they can turn requests for the &#8216;files&#8217; directory on your local machine into requests for remote URLs on the production server.<\/p><\/blockquote>\n<p>Here&#8217;s his Apache rewrite rules:<\/p>\n<pre rel=\"HTAccess\"><code>RewriteEngine on\r\n# Force image styles that have local files that exist to be generated.\r\nRewriteCond %{REQUEST_URI} ^\/sites\/([^\\\/]*)\/files\/styles\/[^\\\/]*\/public\/((.*))$\r\nRewriteCond %{DOCUMENT_ROOT}\/sites\/%1\/files\/%2 -f\r\nRewriteRule ^(.*)$ $1 [QSA,L]\r\n# Otherwise, send anything else that's in the files directory to the production server.\r\nRewriteCond %{REQUEST_URI} ^\/sites\/[^\\\/]*\/files\/.*$\r\nRewriteCond %{REQUEST_URI} !^\/sites\/[^\\\/]*\/files\/css\/.*$\r\nRewriteCond %{REQUEST_URI} !^\/sites\/[^\\\/]*\/files\/js\/.*$\r\nRewriteCond %{REQUEST_FILENAME} !-f\r\nRewriteCond %{REQUEST_FILENAME} !-d\r\nRewriteRule ^(.*)$ http:\/\/www.example.com\/$1 [QSA,L]<\/code><\/pre>\n<p>He&#8217;s working with Drupal through MAMP, but so long as you&#8217;re using Apache locally it&#8217;s all just a variation on the same idea. Match URL&#8217;s that point to the assets you want to target, rewrite them to the live site.<\/p>\n<p>He was able to paste those rules into a little box in MAMP that handles it. I&#8217;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:<\/p>\n<pre rel=\"HTAccess\"><code>RewriteCond %{REQUEST_URI} ^\/wp-content\/uploads\/[^\\\/]*\/.*$\r\nRewriteRule ^(.*)$ https:\/\/css-tricks.com\/$1 [QSA,L]<\/code><\/pre>\n<p>Works great for me! Here&#8217;s a visual explanation:<\/p>\n<figure id=\"post-249416\" class=\"align-none media-249416\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/12\/rewrite.jpg?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Working on your website locally means having the files that make your website tick right there on your computer. It&#8217;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. [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[997,585,989,677,264],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/249348"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=249348"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/249348\/revisions"}],"predecessor-version":[{"id":249417,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/249348\/revisions\/249417"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=249348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=249348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=249348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}