Filament•2y ago

CSS and JS blocked in new project

I have started to setup a new project with Laravel 10 and Vite but when I navigate to /admin I just get an unstyled page. I looked at the network tab and it shows the css and js being blocked for csp and mixed content respectively. Is there anyway around this? Why does this only happen to a new project? I have an existing project with Filament installed and the styles/js load fine.

14 Replies

Dennis Koch•2y ago

Different Server? CSP is probably configured on a server level. Filament doesn't really work good with CSPs or only on really low level.

CarbonNanotubesOP•2y ago

I’m using the exact same setup I used for my past project. It is a docker setup based on this repo https://github.com/aschmelyun/docker-compose-laravel. Only difference is I run the NGINX container through a caddy proxy server. The files are served from the same domain as well

Dennis Koch•2y ago

Mixed content could be an issue with http content on a https domain. Check that. If it's really a CSP you need to check your CSP headers and figure out where they are added.

Andrew Wallo•2y ago

I had this problem as well sometimes when changing things in JS files and “vite.config.js” after already running “npm run build” previously, even after trying to build again so I just wanted to mention that as well here for other people… although I don’t think that is the problem here…

CarbonNanotubesOP•2y ago

This is just a new laravel installed with just filament installed so everything is default Yea I had seem some stuff like that on stack overflow but that didn't help either but it's even blocking it out of the box

Dennis Koch•2y ago

Even on a new project you need the right setup. Can you share the errors in network and console tab

CarbonNanotubesOP•2y ago

Dan Harrin•2y ago

if youre using a proxy its probably badly configured you can verify this by putting Url::forceScheme('https') in a service provider

Dennis Koch•2y ago

Yeah, as I said: You are loading http files on a https resource. So there is some bad configuring somewhere. Does your APP_URL have https:// ?

CarbonNanotubesOP•2y ago

It wasn't, made that change. Now the js is loading but the css still isn't

APP_NAME="IMM Server"
APP_ENV=local
APP_DEBUG=true
APP_URL=https://staging.imm.listech.on.ca

APP_NAME="IMM Server"
APP_ENV=local
APP_DEBUG=true
APP_URL=https://staging.imm.listech.on.ca

CarbonNanotubesOP•2y ago

Ok I had remove any custom code in AppServiceProvider(forcing https and custom filament.css file) and it did not work but uncommenting forcing https and now it works Thanks for your help!

Unknown User•2y ago

Message Not Public

Dennis Koch•2y ago

Yes that's still the case and probably won't change anytime soon.

Unknown User•2y ago

Message Not Public

Gaming

Programming

CSS and JS blocked in new project