No errors, but page does not format correctly
ksorbo opened this issue · 14 comments
It looks as if both the app.js and the app.css are loading, but the page does not format correctly on initial load. The images are display full screen.
I have republished the assets (php artisan log-viewer:publish) several times, but it doesn't seem to make a difference.
Is there some way to completely refresh the assets?
Hey @ksorbo it could also be errors in the console. Are there any? Perhaps the script fails to load.
Otherwise, you could try clearing public/vendor/log-viewer and then publishing again.
Any other ideas?
I have cleared the public/vendor/log-viewer folder completely and then republished the assets.
I continue to get the same problem as posted above.
I upgraded to latest version 3.x
Cleared the public/vendor/log-viewer
Published assets
Cleared cache, hard reset
Still get the same error.
@ksorbo hey, How are you serving the app? Artisan serve, Valet, Xampp, something else?
Try a different serving method, like php artisan serve just to see if that fixes the issues. Perhaps the assets are not being served correctly.
I am having problems on my staging/production server. (When I serve on my development site using local windows machine using laravel homestead, it works ok.)
The server is using Ubuntu 22.10, php 8.1.7, apache2 2.4.54, laravel 10.19, log-viewer 3.1.3
I am getting 200 on all resources as shown in the attached graphic. When I open the js and css files, they both have full compressed content.
No errors showing in the console. I have manually cleared the /public/vendor/log-viewer folder and re published several times.
It seems like code is working correctly, but it looks as if the tailwind classes are not taking effect even though the css file is clearly loading (200). Here is the css file that is loading:
https://staging2023.discipleshipdynamics.com/vendor/log-viewer/app.css?id=93151d8b186ef7758df8582425ff8082
You can see that tailwind is clearly loading. The class .w-5 is searchable in the css file. But when viewed in the inspector, the w-5 h-5 classes are not having any effect.
The following is from my staging server. Debug-bar is also on this server. However, I am getting the same problem on the production server which does not have debug-bar present.
@ksorbo we're getting closer! Thanks for the staging link, this helped me find something.
The file is being served as regular text/html content-type, which means although the browser receives it - it does not treat it like a CSS file. The same happens to the app.js file, which is why it's received but never loaded.
Have a look here:
Something must be off with the way static assets are served on your staging/prod server. Please double-check your apache virtual host config, or the .htaccess file. I'm not exactly sure if there's anything in there that would change the content type of these files.
I injected the css but got this >>
I injected the css but got this >>
I uses stylebot to do that
I injected the css but got this >>
I uses stylebot to do that
now it's
from firefox I got this error
is this ok ?
@MoatazAbdAlmageed , like mentioned in above comments, it's not ok that your CSS files are being served with content type of text/plain. The browser does not know it's a CSS file and thus it does not render it.
You probably have the same problem with the JS file - it should have the content type of application/javascript , otherwise the browser will not process it.
You should look at your server setup and how it serves static assets like JS and CSS.
I have confirmed that the problem was with my Apache server incorrectly serving the css files.
Thanks.