Hi, this is my frst thread on this forum. I beg your indulgence. I am a graphic designer, who just learns how to code.
My problem is as follows:
I have set a local server on my computer for developing and testing websites. Using MAMP, if it’s relevant. What should I write in my .htaccess file to redirect CSS files to the other file or folder I currently need?
After some tests I’ve managed to rewrite my style.css to test.css (in the same folder). The website with style.css has a style from test.css, so it seems work as I wanted.
My .htaccess looks like this:
RewriteEngine on
RewriteRule ^css/(.*)?$ /Users/username/Sites/sitename/css/test.css [NC,L]
The problem is that it works with relative links only, when CSS file is declared on my website with:
Rewrite stops working then. None CSS file is loading now. In Safari’s console I get such error:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8888/css/style.css
As you can see from the link in the error, browser looks for the file in localhost:8888/css/style.css because of the absolute link. Which is wrong, because the file isn’t there. It can be accessed with localhost:8888/sitename/css/style.css or file:///Users/username/Sites/sitename/css/style.css
I believe that the problem you’re having is that you should not be able to use files from another website the way you’re attempting. All you need is a simple href in your link but to an EXTERNAL absolute URL, not an internal absolute URI. Yes, it’s as simple as that! You DON’T need (nor want) any mod_rewrite code but, when you get to that point, have a read of the mod_rewrite tutorial (with example code explained) linked in my signature.
Thanks for your answer, but this doesn’t solve my problem. I didn’t want to use files from another website. I wanted to use files from another folder on my localhost.
Maybe I took the wrong way in the first place. What I want to do is to set the local development environment, so I could test my websites locally. The problem I have is that my css files are located in localhost:8888/sitename/css/style.css and when I declare css’ href to be /css/style.css, the browser looks for them in the localhost:8888/css/style.css. Which is in fact logical, but not what I want.
I’ve found a quite simple, but not perfect workaround. In MAMP’s preferences, in the Apache tab I can change Document Root to /Users/username/Sites/sitename, so then it’s root folder using localhost:8888/ in the browser. Then, CSS with absolute URI works like I wanted.
But… Is there a different solution? Can I achieve the same effect with .htaccess file? I mean leaving MAMP’s preferences intact and changing the root folder of the website via .htaccess file?
Hmm, you’ve discovered that servers are doing EXACTLY what you’re asking them to do: serve css/style.css (from your DocumentRoot).
I don’t have a Mac but you should look at Apache’s httpd-vhosts.conf file as that’s the key to creating multiple websites (each with its own DocumentRoot) on your test server. I’ve done that for years with great success. In fact, I’ve created a separate partition for all my websites, too, so give that some thought. That way, you can use abbreviations or nicknames for your domains to shorten the hand-typed links to your localhost’s websites.
As for your .htaccess questions:
No, you can’t change the DocumentRoot via .htaccess. That can only be done in the httpd-vhosts.conf file.
Yes, if you’re sure you want to load a specific style.css, then you can use mod_rewrite (which is not enabled by default by Apache - see my signature tutorial for what you need to ensure that you can use mod_rewrite) to redirect any file to serve any other file (preferably on your own server - copyright and lag time issues should be considered):
# in your .htaccess file in sitename's DocumentRoot
RewriteEngine on
RewriteRule ^css/style\\.css$ http://localhost:8888/css/style.css [L]
That will capture the “internal” request for sitename/css/style.css and redirect it to the localhost/css/style.css file.
Duh? Too fast! Are you using http://localhost:8888/sitename/ as the DocumentRoot OR are you accessing sitename as a virtual host (remember my httpd-vhosts.conf comments above?)??? If you’re stuck in the localhost:8888 world, then you should move your .htaccess code to localhost’s DocumentRoot and change the directory levels as appropriate (and add sitename/ in the regex while deleting http://localhost:8888/ in the redirection.
You might benefit from reading the mod_rewrite tutorial linked in my signature as it contains explanations and sample code. It’s helped may members and should help you, too.