Css not loaded / error 304

Hello,

First, I must express my gratitude to those of you behind the amazing Lucee and CommandBox technologies.

I am experiencing this problem and would like some help:

I use CommandBox on CentOS7 which I remotely access from Win10. I am the admin and root user on the CentOS, which has a static IP address and is leased from a large webhosting company in China.

A friend of my helped me setup a Node.js-based website, which looks like the following:

The five blue circles in the above image are five tabs in one page.

Now I don’t like Node.js syntax and would like to switch to CommandBox. And thanks to the help from TAG, I have successfully got CommandBox to work to a certain degree.

I have made a copy of the index.html file that Node.js serves, and renamed the copy index.cfm, hoping to see the same result as the screenshot above, but what I see is the following:

Obviously, the five tabs have become bullet points, which is usually caused by css files not loaded.

The developer console of Chrome indicates no errors.

But FireFox shows conflicting statuses (see screenshot above): two lines show that bootstrap.min.css was successfully loaded, with codes 200, but next it indicates that the same css file was not found, with error code 404.

The index.cfm file has a line like this:

and the above include-cfm.js file includes 27 external files into the index.cfm file, like this:


I have indicated the bootstrap.min.css file with a blue underline.

My folder structure is like this:
捕获-4

I sometimes see a long list of 304 error codes, indicating that all the js files and css files referenced in the include-cfm.js file are of 304, like this:


But the 304 errors are not consistent, I sometimes don’t see them, seeing just the conflicting errors of 200 and 404.

I have stopped the Nodejs server to test CommandBox for fear that it may not work together with CommandBox, but I still get the above error messages.

Any help is greatly appreciated.

best regards
Jim

Don’t forget to tell us about your stack!

OS: CentOS7
Java Version: JSE1.8
Tomcat Version: ???
Lucee Version: ???

304 is not an error at all. That is simply the server telling your browser that the file has not changed so the browser uses a locally cached file. I don’t think that is part of your issue at all.

Look in the network tab of your browser’s debugger and see what specific js or css files are actually not loading and then focus on that. It seems your post above has everything but that information.

Thank you very much Brad for your quick response.

Chrome debugger indicates that all the js and css files are loaded properly, with status code 200.

But Firefox debugger indicates different things:

  1. the Network tab indicates that the css files loaded with status code of 200.
  2. Network’s js subtab indicates the same css file status as above. In other words, it doesn’t matter whether I click the css or the js subtab in Network, I see the same screen as the above image.
  3. In FireFox, when I click the Console tab, I see the following conflicting info:

Conflicting because the first two lines say that the bootstrap.min.css file loaded successfully, but the last three lines say the same file has source mapping error, with an error code of 404.

Your kind help is greatly appreciated.
best regards
Jim

Those errors simply mean that you don’t have source map files on your server. Really more of a warning then an error and I don’t think it will affect how your page works. Ignoring the confusion over the warnings in the console, what exactly is the issue?

Thank you very much Brad.
The issue is that the page is not displaying as it should - the styles are not applied: the five tabs have become bullet points, the layout is not right, and the colours are not appearing etc. Please see the images in my original post.

Thank you again for you help.
best regards
Jim

It sounds like your issue is not related to CommandBox or Lucee at this point. Your server is up and running and it’s up to you to debug why your JS and CSS don’t seem to be loading. Good luck :slight_smile:

Thank you very much Brad. Your debugging skill is indeed admirable! With your above suggestion, I have successfully identified where the problem is - I missed two other css files, and that’s why the page was not rendered properly.
Thank you again.
best regards
Jim