This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 2 years ago.
In my Flask app. If the page's path is http://example.com/product/6. I can't import js file in this page's html file like this :
<script src="js/main.js"></script>
The browser will search the js file in http://example.com.product/js/main.js, and return 404 error.
So, what should I do to fix this ?
You should make your static resources use the root directory (if that's where you're keeping them all).
So if your directory looks like this:
.
├── app.py
└── static
├── css
├── img
└── js
└── main.js
try adding a / onto your javascript URL so it isn't just appended onto the page URL.
e.g. <script src="js/main.js"></script> will then go to http://example.com/js/main.js.
FYI - You should be using a web server such as apache or nginx to server your static files as they are a lot better at it than Flask.
You should use url_for to generate the URLs for your static assets.
<script src="{% url_for('static', filename='js/main.js' %}"></script>
Related
I use whitenoise for static files and it works fine.
But how can I serve the /favicon.ico file?
There is a setting called WHITENOISE_ROOT, but I don't understand how to use it.
I would like to keep my nginx config simple and serve all files via gunicorn
If you want those files to be managed by collectstatic
Let's assume after running collectstatic, your favicon.ico file ends up being copied in a root subdirectory, located in your STATIC_ROOT directory.
Then, with:
WHITENOISE_ROOT = os.path.join(STATIC_ROOT, 'root')
Whitenoise will serve all files in STATIC_ROOT/root/ at the root of your application.
In your case, STATIC_ROOT/root/favicon.ico will be served at /favicon.ico.
If you don't want those files to be managed by collectstatic
You can have a root_staticfiles folder in your BASE_DIR which simply contains the static files you want to serve at /.
WHITENOISE_ROOT = os.path.join(BASE_DIR, 'root_staticfiles')
In this case, Whitenoise will serve all files in BASE_DIR/root_staticfiles/ at the root of your application.
Update about pathlib (2022-10-04)
Since a while now, the default settings.py Django creates uses pathlib. To be consistent with it, one may replace os.join calls with / operators, eg.:
WHITENOISE_ROOT = STATIC_ROOT / 'root'
You could as per this answer by hanleyhansen add the following line in a base template (used by all further templates):
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
Or you could write a redirect view like this answer by wim with some little modification:
from django.views.generic.base import RedirectView
from django.conf.urls.static import static
re_path(r'^favicon\.ico$', RedirectView.as_view(url=static('favicon.ico'), permanent=True))
I have a django app that uses Whitenoise (hosted on Heroku) and serves my favicon from a separate folder from my static files.
Make a folder root_files at path BASE_DIR/root_files.
In settings.py:
WHITENOISE_ROOT = os.path.join(BASE_DIR, 'root_files')
For a real-life code example checkout Mozilla's Bedrock repo. They have favicons in BASE/root_files and configure WHITENOISE_ROOT in settings.py
I just started a new project and currently Django can't find the static files. I'm using Django==2.2.6
The static files are located in an app called "website". This is the file structure.
https://i.imgur.com/AnPACop.png
This is from the settings:
STATIC_URL = '/static/'
This is how i include the static file:
{% static 'css/style.css' %}
The URL to the static file seems correct:
<link href="/static/css/style.css" rel="stylesheet">
EDIT: its NOT correct. But this works:
<link href="/static/core/css/style.css" rel="stylesheet">
Make your file structure like the following one:
ProjectFolderName
static
- css
- js
template
website
projectfoldername
migrations
Put your static folder in your project folder. Then make these changes to your settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
Then run this command:
python manage.py collectstatic
You static file will be copied to New file created by django as assets.
and add to your HTML
{% load static %}
This is the URL that the browser will find your static files. It won't let Django know in which folder to find them inside your project root (`BASE_DIR)
STATIC_URL = '/static/'
Try using this instead to specify the directory you are storing the statics
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'website/static'),)
Also, make sure you are loading the statics in your template with the following template tag
{% load static %}
Update
The path to the CSS is also wrong on the html you should change it to:
<link href="/static/core/css/style.css" rel="stylesheet">
It's solved. The problem was the file structure. For some reason the static files was in a core-folder.
https://i.imgur.com/AnPACop.png
When i put the files directly in "static" it started working.
My english is not perfect, sorry in advance.
I'm in Django 3 and I had the same problem. This how I find what's wrong, with the help of everyone up me. Just consider this post like a note for me.
I do :
python3 manage.py runserver
At this moment I read the last line of the output. It was looking in a file that did'nt exist. I copied the path. Go in terminal and :
cd path/copied/before/static/base.css
File not found. At this moment I know what to do. Just follow the path and create the folder I need.
I know it's not a good practise but it's can help beginner.
I've encountered a problem that, even after an evening of trying , I've not yet been able to resolve.
For my project I have a single static directory, and I've included the css files for the 'login' page in there. Yet when I try to load the webpage I get a 404 error.
When I try to find the files with the 'findstatic' or 'collectstatic' commands the files get skiped. Its like the 'static' directory is invisible to django. I've even directly copies the 'Login' folder to 'static_root', but even then the program was Django was unable to find the files.
Does anyone have an idea what I am doing wrong?
My project folder looks like this:
* MPS (main folder)
* Scraper (app)
* Database (app)
* Templates
* Static_root
* Static
* Login
* css
* style.css
My settings.py has been configured like so:
STATIC_URL = 'static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'static_root/')
And I call the static files in the template with the following code:
{% load staticfiles %}
(...)
<link rel="stylesheet" href="{% static 'login/css/style.css' %}">
Your project folder structure looks a bit different from most Django projects. Traditionally it would look something more like this:
myproject/
urls.py
wsgi.py
settings.py
myapp/
static/
myapp/
css/
style.css
js/
index.js
manage.py
Notice that the app static files of myapp is within a subfolder called the same as the app folder. This is to easily namespace the files as you can read more about in the docs.
Now we might be able to get away with putting our static files directly in my_app/static/ (rather than creating another my_app subdirectory), but it would actually be a bad idea. Django will use the first static file it finds whose name matches, and if you had a static file with the same name in a different application, Django would be unable to distinguish between them. We need to be able to point Django at the right one, and the easiest way to ensure this is by namespacing them. That is, by putting those static files inside another directory named for the application itself.
I want to translate a part of the JS in Django.
I've try the command python manage.py makemessages -d djangojs but it take only file in TEMPLATE_DIRS in the settings.py
I've try to set a JS in a template directory, and it work perfectly.
I've the djangojs.po and i can generate the .mo when i compile.
So the question is : How make message in static file?
I've found the same problem
Here
and
Here but no one answer who keep a good architecture.
Please, save me!
My architecture:
myapp
locale
static
myapp
js
try.js
template
myapp
try.html
views.py
urls.py
[...]
PS: Sorry for my english, i'm not native ;)
My error is when i set the STATIC_ROOT in settings.py. In fact this variable say at Django where stock Static when it do a CollectStatic on the server, i used her for say where found my static (Django can find all static whitout informations, it find static on a folder static on the project folder or on the app folder)
Finally :
set this in the urls.py of the pro
js_info_dict = {
'domain': 'djangojs',
'packages': ('app.kanboard',),
}
urlpatterns = patterns('',
[...]
#Internationalization Javascript
url(r'^jsi18n/$', 'django.views.i18n.javascript_catalog', js_info_dict),
)
In the template
<script type="text/javascript" src="{% url 'django.views.i18n.javascript_catalog' %}"></script>
In the JS in static/my_app/my_file.js
document.write(gettext('Ma chaine de caractère a traduire'))
After, we rule this command-line
python manage.py makemessages -d djangojs
Here, djangojs is the domain set in urls.py at the begin (It's a pseudo-convention)
At this time, we have a djangojs.po in the folder locale what we can compile as a standard .po.
Link of the doc : Here
Lik of my ticket where you can find a sample project and explication in english : The ticket
Good luck !
I am setting up a flask web-app running on gunicorn with nginx as the back proxy.
For the life of me I cant figure out how to link static files in the template.
It keeps giving a 404 error when I try to access the linked file from the web-page, the path showing in the address bar as 127.0.0.1/static/styles/main.css which is obviously wrong. Template engine I am using is the default jinja2.
Here's the stylesheet code that I am trying to link with(file --- main.html).
<link rel="stylesheet" href="{{ url_for('static', filename='styles/main.css') }}"/>
the folder structure is :
entry.py
/templates
main.html
/static
/styles
main.css
Do I need to make some changes to the nginx conf file or something?
Thanks.
Yes you will. In your server section of the nginx.conf file add something like this...
# serve static files - each entry is a separate folder
location ~ ^/(images|js|css|flash|media|static)/ {
root /var/www/html/Web;
expires 30d;
}
Hope this helps!