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

i have tried it but didn't work but the wierd thing when i checked the page source code online the url was like this : test1/test1/css/main.css — Ali Mhanna
– Ali Mhanna, Commented Jul 4, 2019 at 14:35
See the answer here: stackoverflow.com/questions/49758336/symfony-4-in-subdirectory. — Chris
– Chris, Commented Jul 4, 2019 at 15:16
@Chris this is something else in my site its not a sub directory its the website itself — Ali Mhanna
– Ali Mhanna, Commented Jul 4, 2019 at 19:32

exside · Accepted Answer · 2019-07-09 20:58:44Z

5

+50

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')) }}" />

edited Jul 9, 2019 at 20:58

answered Jul 9, 2019 at 20:41

exside

3,9621 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

exside Over a year ago

any change if you add a slash / at the beginning, e.g. absolute_url(asset('/css/main.css'))? Another option you could try is to add a <base href="//test.com/" /> tag into the <head> of your template, see developer.mozilla.org/en-US/docs/Web/HTML/Element/base for more info.

Ali Mhanna Over a year ago

thank you very much for your help but still not working. the problem is when i use the absolute_url its returning (test.app/css/style.css) and in this case i get a not found error from the load balancer and if i put (test.app/test/css/style.css) i get no route found error fom symfony

exside Over a year ago

Then I think you might have to look at your load-balancer config, because as far as I understand test.app/css/style.css would be the correct (physical) path of the file, right?

Ali Mhanna Over a year ago

100% correct but does it help if you know that the load balancer is working with ingress and Kubernetes is it possible that i should do something different ?

exside Over a year ago

unfortunately not really, not very familiar with either =/

Ali Mhanna · Accepted Answer · 2019-07-12 17:51:41Z

0

i just want to thanks every one tried to help me with my problem but now i found the problem and the solution:

the problem has nothing to do with symfony it self but it was related to the hosting service its seems to be that the service provider is using ingress and Kubernetes and ingress does not support static files (css, js) loading. there is work arounds if you have access to the server settings files but in my case there was not.

my solution was to serve the static files as a service. its somthing like private CDN for my assets and all the static files.

thanks again and if any one had the same case i will be more than happy to help.

answered Jul 12, 2019 at 17:51

Ali Mhanna

2093 silver badges16 bronze badges

1 Comment

exside Over a year ago

glad you sorted it out, sorry I could not be of better help =)!

Collectives™ on Stack Overflow

how to fix css loading problem on production server

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related