how to fix css loading problem on production server

Question

my website is now hosted on a server and the URL is like this

test1.test.com 

but now I have to move it to another hosting which they don't have this ability and I had to change it to:

test.com/test1

until now everything is working except the CSS and JS files I get 404 not found error.

and in my case, I didn't change anything and this is how I am loading the CSS files

        <link rel="stylesheet" href="{{ asset('css/main.css') }}">

does anyone have any idea how can I fix this? of course, i tried to add the (test1) before the {{ asset('css/main.css') }} but it didn't change anything.

PS: the source code is not saved under sub directory the /test1 is just routing to a load balancer.

and here are the apache2 setting file for docker image:

    <VirtualHost *:80>
    DocumentRoot /var/www/html/web
    <Directory /var/www/html/web>
        AllowOverride None
        Require all granted

        <IfModule mod_rewrite.c>
            Options -MultiViews
            RewriteEngine On
            RewriteCond %{REQUEST_FILENAME} !-f
            RewriteRule ^(.*)$ app.php [QSA,L]
        </IfModule>
    </Directory>

    ErrorLog /var/log/apache2/app_error.log
    CustomLog /var/log/apache2/app_access.log combined
</VirtualHost>

the deployment is on a cloud server using docker image and locally it's working in any way I am accessing the website. any ideas or setting it might help? thanks in advance

Answer 1

It uses a relative path, so if your "base"-path is /test1, a relative path would look in a folder called /test1/css/ for the css file.

Depending on your symfony version, the asset() function allows an absolute config parameter to make the path absolute, therefore: what happens if you include the static files like this:

<link rel="stylesheet" href="{{ asset('css/main.css', absolute=true) }}" />

if you're on a version later than 3.0, use:

<link rel="stylesheet" href="{{ absolute_url(asset('css/main.css')) }}" />