Forums

CSS/Bootstrap failing to load

Hi there, I managed to get my site up and running, and all of the functionalities all set, but I cannot seem to get my bootstrap to work. It works on a localhost on my machine, but I have not been able to get it to work on pythonanywhere. I have checked pip, and every dependent is installed on both my virtualenv and my local machine, and I have looked in the code on both pythonanywhere and my machine, and I can find no difference between the two. Where should I look to get my site to look right? Thanks!

How are you serving the bootstrap css/js etc?

Check out this.

That looks like it should help, thanks! I have changed the path to the URL /static/ to home/vaultkey/Vaultkey/vaultkey/static/, but that did not seem to fix the problem. Any other suggestions?

I just took a look at your site, and checked the debug console, and (as you'd expect) there were a bunch of 404 errors. One example: http://vaultkey.pythonanywhere.com/static/min/plugin-min.css.

As you have a static file mapping from /static/ to /home/vaultkey/Vaultkey/vaultkey/static/, that URL will be looking for the file /home/vaultkey/Vaultkey/vaultkey/static/min/plugin-min.css. Does that file exist? Remember that Linux file paths are case-sensitive.

Yeah, the file exists and that is the path to it, I can't seem to find a difference between the two paths.

Hi there, I see three posts from you about static files, can we group together responses here? https://www.pythonanywhere.com/forums/topic/4495/

Hi there -- not quite sure why my colleague Harry thought that this was the same person as you. If it wasn't, can I take a look at your files to see if I can debug this a bit further?

It wasn't but that would be absolutely fantastic. I may have another thread with a similar name, that might have caused the confusion. Thanks for your help!

No problem. It's definitely a case-sensitivity problem. The file /home/vaultkey/Vaultkey/vaultkey/static/min/plugin-min.css doesn't exist. /home/vaultkey/VaultKey/vaultkey/static/min/plugin-min.css does -- note the capital "K". If you correct the directory path in your static files mapping on the "Web" tab then everything should work fine.

Oh sweet, that fixed it. Thank you so much!

Ok, so it appears the issue we found only fixed the Bootstrap on the homepage, but it does not load on any of my other pages. Do you have any suggestions?

Hi there, two things to check

  • have you definitely flushed your browser cache?
  • what is different between the home page and the other pages?

The main difference I can see is that my other templates import tags from Django material, but I have that installed on my virtualenv. Would I need to create a path to that in the static files URLs section?

Edit: I tried including a path, but that did not fix the problem.

Can you give us an example of

  • a page that's trying to load a static resource (and its url)
  • the url of the static resource that's failing to load
  • the path on disk that the static file is located?

Sure, one of the pages that would be loading the bootstrap would be vaultkey.pythonanywhere.com/request, one static resource that isn't loading would be one of the modules I have downloaded to my virtualenv using pip, django-material, and the path I have designated for /material/ is /home/vaultkey/.virtualenvs/myvirtualenv/lib/python2.7/site-packages/material. Hope that helps!

Can tell me the path of one of the specific static files within the material module? what URL should it be available at, and where is it on disk?

I wonder if you need to run "collectstatic"? Have you seen this guide? http://help.pythonanywhere.com/pages/DjangoStaticFiles

One path to a static file in the material package I downloaded is /home/vaultkey/.virtualenvs/myvirtualenv/lib/python2.7/site-packages/material/static/material/css/forms.css. I'm not entirely sure how you would pull it up with a URL, but it is being called by every page except my homepage. I had previously run collectstatic, and I did again, the only thing I can think of is that when I run collectstatic, the console returns a traceback saying that STATICFILES_DIRS should not contain the STATIC_ROOT setting, but I am not sure how to resolve that. Thanks!

So when you run collectstatic, does it run successfully? I think Harry was asking where your collect static collects the static files to.

It appears to. It displays a traceback error but it occurs after the process runs.

Again, the issue is occurring with both files in my /static/ directory and in packages I have installed using pip.

Hi there,

collectstatic's job is to copy static files from out of the virtualenv site-packages directory and into your STATIC_ROOT directory, which is where your static files should be served from (and where the URL mapping on the web tab should be pointing at). (take another look at this page if any of that is unclear: http://help.pythonanywhere.com/pages/DjangoStaticFiles)

If collectstatic is reporting an error, then it's probably failing to copy files successfully, so that's probably the problem you need to fix. It sounds like it's giving you an error message with a pretty clear indication of what's wrong?

The official django docs on static files also have some pointers on exactly what STATICFILES_DIRS and STATIC_ROOT are for.