Configure path to images in CSS for dev and production environments

Question

Hi folks, I'm currently developing a website and I have my local environment which is hosted on an XP box with IIS 5.1. I'm using ASP MVC2 and .NET Framework 4.0.

What I want to know is, if there's a way to "configure" in web.config (or any other ways) a path for all my images so that when my CSS uses url() it automatically knows where to look for.

The main reason behind this is that we have a lot of images and documents that we do not want to store in our source control as it's not relevant to have them in there since it changes a lot from our content writers.

Providing a dev and prod space for them to edit, review and deploy their own documents is also a huge benefit for productivity and I want to keep it that way if possible as we have a mechanism to validate that all the files linked in our sites are valid.

So, for example, on my dev box, I would like to use "http://static.devserver/Images/..." but when deploying, I would like them to use "http://static.productionserver/Images/..."

Obviously, considering my requirements above, hosting the CSS on the static subdomain wouldn't be working out in this scenario or maybe I've missed something?

I've been told to use mod_rewrite and/or htaccess but I'm not very well documented on this and seems rather complex for the time I have right now to deliver this project.

All in all, I'd like you guys out there to share your thoughts and suggestions on ways I could get this working as I described it above.

Thanks a lot for reading!

Answer 1

There is no easy solution to do exactly what you want. You might have to output .css file as a dynamic page, substituting a string from configuration before each URL( in CSS.

Do you really need a subdomain? Why not use a subfolder? url('/css/yourcss.css') is universal for both dev and production.

(Well, I know there are issues with additional traffic from cookies, but still, this is WAAAY easier to do)

Answer 2

BarMonster's relative path is the way to go. The url('/subfolder/yourfile.ext'). That's the best way to do images, and most links within the site to be able to translate between test and live environments.

Answer 3

Thanks a lot guys for trying to help me out! I finally digged again in url rewriting to find the solution to my problem! I needed to "redirect" instead of "rewriting" the url!

Now it works as intended!

I'm using Intelligencia's URL Rewriter with this simple rule:

<rewriter>
        <redirect url="^.+\.(?:jpg|bmp|png|gif)$" to="http://myDEVserver$0" processing="stop" />
</rewriter>