Apache RewriteCond not working for static files

Question

I have two copies of the website in separate directories for different languages (Spanish and English) and the directory structure is as follows

+ /var/www/website
  |- es
  |- en

The es directory serves the Spanish version of the website and en serves the English version (default language).

The URL schema would be like

# English version
https://example.com/
https://example.com/en/ -> Redirects to https://example.com/

# Spanish version
https://example.com/es/

The static files are served from the respective directories only.

Now, I have the following Apache2 configuration

<VirtualHost *:443>
        # The primary domain for this host
        ServerName example.com

        DocumentRoot /var/www/website
        <Directory /var/www/website>
                Require all granted
                AllowOverride all

                RewriteEngine on
                RewriteBase /
                RewriteCond %{HTTP:Accept-Language} ^es [NC]
                RewriteRule ^$ /es/ [R]

                RewriteCond %{HTTP:Accept-Language} ^en [NC]
                RewriteRule ^$ /en/ [R]

                RewriteCond %{HTTP:Accept-Language} !^en [NC]
                RewriteCond %{HTTP:Accept-Language} !^es [NC]
                RewriteRule ^$ /en/ [R]
        </Directory>
</VirtualHost>

I'm facing a few problems with the configuration

1. https://example.com/es/ and https://example.com/en/ are working but static files are not loading and the URL for the static files looks like https://example.com/image.png which has to be https://example.com/es/image.png (for Spanish) and https://example.com/en/image.png (for English)
2. https://example.com/en/ should be redirected to https://example.com/ and the English website should be served, whereas the reverse is happening.

Answer 1

Let's first understand what is happening here.

With rules like this

RewriteRule ^$ /es/ [R]

you are redirecting requests to / to /es/.

Redirecting means, the server will tell the browser to go search for the content at some other place.

The browser will then send another request to /es/. This will not be rewritten nor redirected as there is no matching rule.

You html file apparently contains references with absolute URLs like this:

<img src="/image.png" />

Your browser will therefore send a request for /image.png, which is not redirected, nor rewritten.

There are different ways how to solve that:

1. Update your html/code to absolute URLs with the right path

Like this:

<img src="/es/image.png" />

That's the best solution imho. Depending on how you generate the content, there might be an option to set the base URL of the project.

1b. Make the webserver do these substitution on the fly for you

You could think about whether you want apache to make these substitutions for you, e.g. using mod_substitute, but there might be cases you cannot catch with this approach. I would not recommend it.

2. Update your html/code to relative URLs

I.e.

<img src="image.png" />

This sounds nice on first sight, but can become ugly if you're having complex page structure, e.g. /es/foo/bar/somepage.html would need <img src="../../image.png" /> to reference /es/image.png.

It can become especially tricky if you want to serve the same content under /es/foo and /es/foo/ (without redirecting one or the other). The two would need a different relative path to the image.

3. Rewrite requests for /image.png

In theory, you could let Apache rewrite requests for /image.png to either /es/image.png or /en/image.png depending on the accept-language header.

I would not recommend that, as it leads to strange behavior. E.g. assume a user consciously decides to visit /en/ even though his language settings prefer Spanish. The browser would then request /image.png and the server would deliver - based on the language settings - the Spanish variant of the image. While the HTML shows the English content.