Stylesheet can't be loaded properly in production mode.

[kassihassan]

Hi everyone!
I discovered vanilo few months ago and I fall in love instantly. It was the kind of library that my Laravel projects were missing for a long time, so many thanks to the team behind it.
However, after my first deployment, my app failed loading the file https://software.kassihassan.com/css/appshell.css with the error message :

1. The stylesheet https://software.kassihassan.com/css/appshell.css was not loaded because its MIME type, “text/html”, is not “text/css”. order
   2.Uncaught SyntaxError: expected expression, got '<'

I did some digging and found many results from people experienced the same problem, but none applies to my situation,
I started building on top of this demo https://github.com/vanilophp/demo because I didn't want to write the admin panel from scratch.
My hypothesis are:

• Laravel treats css/appshell.css as request to an endpoint of its routes, thus not found error. (I did encounter the same problem with images before, and I solved it by adding a specific route/controller for serving different kind of images)
• Demo used laraveI mix and bootstrap 4 to build the production assets, and I used on top of that tailwindcss with a mix plugin to build more storefront assets (css and javascript), that could mess with the old assets that came up with demo (I honestly have no idea if this is either possible or not).
• My researching results hint that what caused the problem might be the way the CSS files are included (Ex: missing the property type="text/css" for link tag), but I don't want to change anything in the code base because I am not 100% convinced I understand it.
• It might be just the environment in which I host the app (I used namecheap hosting).

I WOULD APPRECIATE ANY THOUGHTS PUT ONTO THIS TO HELP ME FIND A SOLUTION, BECAUSE I DON'T WANT TO START OVER AGAIN BUILDING AN ADMIN DASHBOARD FROM SCRATCH.
MANY THANKS IN ADVANCE.

[fulopattila122]

Is there an appshell.css file in your app's public/css folder?

[kassihassan]

yes.

[fulopattila122]

Does /css/app.css load properly?

[kassihassan]

I don't think the website loads /css/app.css in production mode, I think it loads /build/assets/app-81db6e91.css instead,

[fulopattila122]

This also gives 404: https://software.kassihassan.com/css/app.css

This must be a web server configuration issue.

Although generic web development support is out of my scope here, if you let me know 1) how your web server is configured and, 2) what is your document root, 3) where is the build/ folder; I might be able to give some hints.

[kassihassan]

Thanks anyway.

1. I am not sure what configuration we're talking about here
2. I hosted the whole website as subdomain in a different folder (not /public_html), but I don't think that's the problem.
3. the two folders have the same root, public directory (public/build/assets & public/css)

[fulopattila122]

Oh, I see you're using LiteSpeed. Unfortunately, my knowledge of LiteSpeed is almost zero.

[kassihassan]

It's okay, all I need is just understanding what happened and what should I do next. (I think appshell.css should be moved somehow to build/assets and served just like other css files, but I have no idea how to do it without changing some code in vendor folder)

[fulopattila122]

Unfortunately, I can't help with this. The web server should load those files from the public/css folder.

As an alternative, you can move them to the build folder (because that works) and tell the admin panel to load them from a different location: https://konekt.dev/appshell/3.x/admin-panel#custom-assets

[kassihassan]

I'll try, thank you for your guidance.

[fulopattila122]

Please let us know how it went and what the solution was once it works. Thank you 🙇

[kassihassan]

I will for sure.