I have set up a basic Django system and am testing out the admin app. The admin screen displays with raw styles and not the pretty ones shown in the tutorials and specified in the style-sheets.
Following several other questions, I found this is a common problem caused because Django doesn't normally serve static files. However, it does if DEBUG is switched on and I do have debug switched on. I followed all of the suggestions in the answers anyway to collect static files, etc.
If I enter the static file URLs directly they get downloaded and I can see the files in the developer mode of the browser (both Chrome and Edge). So I think the static files are being served.
Furthermore, if I save the page using the browser, it saves all of the static files and then if I open the main page it is shown with the correct styles. So the styles are working.
So it would seem to me that the files are being served and the browser is getting them and it can render them (from a saved file) but it somehow isn't working when served from Django.
Can anyone tell me what is going on?
EDIT:
Here is a strange thing: if, using the Chrome developer tool, I select the base.css file, click somewhere in the text of the CSS (say at the end of a line) and then add a space, suddenly the page appears correctly.
If I then do refresh the page it goes back to unstyled again.
EDIT 2:
I saw a recommendation to install the Whitenoise app to serve static file so I went ahead and did it. I turned off debug and presto! the styles appear. Turning on debug (so I presume django serves the files) and the styles go away. I saved both sites to the file system and compared the directories using a compare tool. There was no difference.
I'm not calling this an answer as the question is:
Why?
Also, I can't have debug on and get styles.
Related
I have downloaded the free theme that can run to my Django server. I debug all things using static but the only front background image is not appearing on the server due to these problems in the console. Help me to get rid of this please.
First, open up your console.
Then, uncheck the circled checkboxes
and then reload.
I faced this problem while developing in ReactJS but I hope this will translate into bootstrap as well. However, I don't think the failed sourcemap thing actually brings side-effects to your code.
EDIT
If you have Grammarly enabled, do this:
go to chrome://extensions
And then change the extension to be manually enabled
After that, every time to want to use Grammarly, you either have to manually enable it (image below) or add a list of sites where you want it to run automatically (not on the site which you're running the server on).
I've been using Flask and have linked the html I'm rendering to a css stylesheet. I've noticed that whenever I update my CSS code, I have to clear the cache in order to get it to update on the webpage. How can I fix this?
I assume you are loading your CSS files with something like:
{{ url_for('static', filename='some/file.css') }}
For this to refresh immediately in development, you should set the following config var to -1:
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = -1
As #Matvei states, this issue is more to do with your browser. To visualise this, open the dev tools, go to the Network tab and highlight the specific CSS file. Then in the section on the right look for the following line under Headers -> Response Headers:
Cache-Control: public, max-age=-1
If the setting has been applied correctly this should show -1. If it shows anything else you need to refresh that specific file, until it does show -1, possibly having to clear your cache. This is because the browser makes the choice of whether to reload the file based on the Cache-Control header.
See my similar answer on this with screencaps and links to the docs.
tldr: Refresh the page with Ctrl-F5 (or whatever your keyboard shortcut is for a hard refresh).
Full Answer:
The issue (if you want to call it that) is with your browser, not Flask.
To improve speed, browsers cache data. In your case, your browser is caching the CSS for your web pages. Your browser doesn't know when you update the CSS, which is why you have to clear the cache.
Even if there was a way of disabling this, I wouldn't. Without caching, web browsing would be significantly slower.
Instead of clearing your entire cache, you can do a hard refresh. That will tell the browser to reload all data (including CSS) directly from the server. In Firefox, the shortcut is Ctrl F5.
More info here: https://humaan.com/blog/clear-your-browser-cache-a-quick-guide/
I'm working on a demo for a program that creates some files on its own directory. This demo will be shown to someone physically far, via VPN, so I made a simple django project just to receive an input, call some scripts and display the output - the generated file. However, I don't have permission to open the file to display it since it's on a directory outside of the django project (the result is a permission denied error).
I'm aware it's not good practice or even safe for a web server to have access to files outside of its directories, but since this will run in a closed environment for a short amount of time only, is there a workaround?
Think of it this way - If web server can generate the files , it can display them also.
As for your answer - if you know the path of the file, use the python open built in method to open the file and render the result to a template.
data = open('file_path').read().decode('utf-8')
render(request, template, context={data:data})
The problem is described in title. I have this template for a blog that I'm creating using Django.
When I open it normally, using double click over the HTML file, it looks like this:
But when I open it via url from the Django project, it looks like this
It only shows a green square (part of the css) but obviously can't open the css correctly.
Any idea to solve this?
In Django you don't open the HTML with double click on the file, you need to run the server first and open your site using the localhost (like you did in the second picture).
Judging by those images, are you sure you put the image in the static folder? In Django, the HTML files stays in the "templates" folder of your app and the css, javascript and images in the "static" folder.
If this answer doesn't help you, then you should post your code here, otherwise I can't find the problem.
When using django, compressor, and clevercss, I set my css url to an absolute path. Clevercss is then passed the path of the .ccss file without the COMPRESS_ROOT prefixed (the absolute path). When I set my css url to a relative path, clevercss processes the ccss files, but the browser then correctly looks for relatively placed css files (e.g. mywebsite.com/profile/user/1/css/stylesheet.css)
Compressor, however, does use the MEDIA_ROOT when the css link is a relative url, but not when an absolute url is used. This has the unfortunate effect of my css either being rendered by clevercss and not accessible by the browser (unless on the home page), or clevercss not having access to the files (due to an absolute url being used). Ironically, the examples offered on http://github.com/mintchaos/django_compressor use absolute urls for the css paths.
I think I'm doing something wrong here, but I'm not sure where it could be and have spent quite a few hours looking. I'm also currently running this locally through ./manage.py runserver and serving some static files (images) through django. (this is fine for my local development).
I can't speak to django-compressor specifically; but I have been dealing with finding a good automatic compression solution for the CSS and JS files of my Django-powered web applications. I'm currently using django-static. It's been really easy to set up and use, IMO. I was running into some issues running django-compress (different from django-compressor) when I decided to give django-static a try. So far it's been great. Might be worth checking out. It can be found here: http://github.com/peterbe/django-static.