CSS & JS
I have 3 panels - one for guest, one admin and one for students. All three have their own themes. I have run npm run build and build the assets. In deployment, I want to take out the CSS and JS file to a different server. But the next step is not clear to me.
Any advice?
5 Replies
you can try registering your styles and scripts, see this docs https://filamentphp.com/docs/3.x/support/assets#registering-css-files-from-a-url
Thanks for the help. If I understand correctly once I have compiled these css and js files for each panel, I should name it suitably, say app-{panel}.css and app-{panel}.js and then copy them to my external server (to a s3 server actually) and then I register them in the AppServiceProvider. But then won't all of them would be loaded when I load different panels? The color themes are different for different panels, how would they work? I suppose global css / js can be loaded via this, but I still would need a way to load panel specific css /js for different panel. Anyway I will try it out.
you can try load those styles based on their roles using if else condition alongside with loadedOnRequest(), I suppose...but I never try it myself, you can have a go then post it here...maybe my solution is not the best
I tried it out. I uploaded the global css files to S3 and then loaded via AppServiceProvider, as mentioned in the documentation. But it is loading both css, local as well as from s3. I now need to find a solution to stop it from loading it from the local server. Any suggestions?
the only way that I can think of is to modify your compenents layout blade, remove @FilamentStyles and add your external css