Develop Reference

How to load favicon in django server from react build folder? manifest.json not found error

I have developed a website using react as frontend and Django as backend, I have completed the project and made npm run build and I have added the index.html into the Django templates DIR and static files which are inside the build folder
But manifest.json, favicon.ico which is inside the public and build folder are not visible in Django page which localhost:8000, favicon is visible in React page which is in localhost:3000
Project Structure:
Project
|__backend
|__settings.py
|__urls.py
|__base --app
|__views.py
|__models.py
|__build -- reactjs npm run build
|__assets - folder which has images
|__static -- css and scss folder
|__manifest.json
|__favicon.ico
|__index.html
|__public
|__src
|__static -- django static folder
settings.py
STATIC_URL = '/static/'
MEDIA_URL = '/images/'
STATICFILES_DIRS = [
BASE_DIR / 'static',
BASE_DIR / 'build/static',
os.path.join(BASE_DIR, 'build/assets'),
]
MEDIA_ROOT = 'static/images'
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('', TemplateView.as_view(template_name='index.html'))
]
urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
Errors in terminal:
Not Found: /manifest.json
[04/Sep/2021 14:03:50] "GET /manifest.json HTTP/1.1" 404 2788

In this scenario, Django doesn't need manifest.json to load the favicon if you just want to load the favicon, You can add your favicon in the media upload directory. In your case, it's images.
After that, the URL to Load favicon should be like that
http://localhost:8000/static/images/favicon.ico
Then you just have to replace the URL from Public/index.html
from
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
To
<link rel="icon" href="http://localhost:8000/static/images/favicon.ico" />
That's it. Now reload the Page and your favicon will be available as expected.
If you want to load manifest.json correctly then you can use the same
approach configuring the URL like previously done with favicon.

Django: my css static path does not exist

My link looks like this:
<link rel="stylesheet" type="text/css" href="{% static 'css/background.css' %}">
This is fine because it gets the path I want which is href="/static/css/background.css". I use {% load static}. I have django.contrib.staticfiles in my INSTALLED_APPS. This is some more relevant info on my settings.py:
STATIC_URL = '/static/'
STATICFILES_DIR = [
os.path.join(BASE_DIR, "static"),
]
But I'm pretty sure this is right too. My problem is that static/css/background.css cannot be found by my local server. I know this because http://localhost:8000/static/css/background.css gives me a 404 error. I don't know why this is the case because this is my project file path:
Project
Project
src
static
css
background.css

Have you set your url paths ? Here is a snippet from the official Django documentation.
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

I fixed my problem and I'm posting this in case anyone this can help anyone else. My problem is that I had my static folder outside my app. It turns out that my website is targeting my app and so when django was looking for the static folder it was looking for it in my app. So try putting your static files in your app and see if that helps.

Django static image not displaying

I have looked every where possible, I have not found the answer to the issue I'm having. I spent hours in this and find not avail.
My front end was displaying all images and css with a static folder under the project or under the app tree.
After I did the changes to use a dynamic url, and created the static folder out of the project folder(one folder down) did collectstatic all of sudden my images have disappeared, css still works either direct path'd or dynamically.
I have tried the same with images, direct path(as a copy of the folder still remains in the project folder) the direct path does not work, neither the dynamic path.
Its not returning 404 either, on the first load, it returns 200, on second 304 as if the image was there on screen, but it isnt. There is just no errors, but darn image is not there.
What puzzles me is that the css works, but image does not display.
Bellow is my code.
---|settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"),
#'/var/www/static/',
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")
---|url.py
if settings.DEBUG == True:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
---|main.html (template)
{% load staticfiles %}
<img src={% static "images/banner_top.png" %}>
or
<img src="..static/images/banner_top.png">
or
<img src="static/images/banner_top.png">
on browser the image doesn't show, but back end shows 200 and right path to image.
http://127.0.0.1:8000/static/images/banner_top.png
[22/Oct/2016 22:32:10] "GET /static/images/banner_top.png HTTP/1.1" 200 0
Here is the HEADER
GENERAL
Request URL:http://127.0.0.1:8000/static/images/banner_top.png
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:8000
REQUEST
Content-Length:0
Content-Type:image/png
Date:Sun, 23 Oct 2016 08:06:17 GMT
Last-Modified:Fri, 21 Oct 2016 06:54:06 GMT
Server:WSGIServer/0.1 Python/2.7.10

Well, problem has been solved. Koterpillar over #django IRC help me on figuring this out.
Somehow the system emptied the images files(corrupted) (which I think happened over collectstatic) and that's why the images were loaded and nothing displayed.
upon checking
curl -D - http://127.0.0.1:8000/static/images/banner_top.png
which only returned the header and no content. So, following on check the images files and verifying that the contents where gone. I replaced with new images and then it was displayed again on website reload.
Many thanks to Koterpillar

first I don't understand why you set like below.
urls.py
if settings.DEBUG == True:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"),
#'/var/www/static/',
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")
because you write static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) in urls.py and at the same time, your are using django.contrib.staticfiles app. If you put django.contrib.staticfiles in INSTALLED_APPS, It sever static files automatically. you can use static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) in urls.py when you want to sever static files manually.
please check serving static files during development
one option
1.you don't use django.contrib.staticfiles.
INSTALLED_APPS = [
(...)
# 'django.contrib.staticfiles',
]
then serve static files maunally.
in urls.py
+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
in settings.py
STATIC_URL = '/static_cdn/'
STATIC_ROOT = os.path.join(BASE_DIR, "static_cdn")
if you collectstatic under project folder
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")
second option
1.you use django.contrib.staticfiles.
INSTALLED_APPS = [
(...)
'django.contrib.staticfiles',
]
STATIC_URL = '/static_cdn/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static_cdn"),
and other path
]
first, it will find static files under app folder tree(now I set STATIC_URL = '/static_cdn/', so in folder which has name as static_cdn). if you want to get static files not in app folder tree, you set STATICFILES_DIRS =
I don't know why it return 200 and doesn't show any image on your browser exactly. but I assume that you mixed two together and somehow it caused some problem. please check it.
I hope my idea is helpful for you! Good luck!

I went through the same problem. I was using Django 1.11
So the solution I found after several tweaks:-
This works: Without using {% load staticfiles %}
{% static '/images/banner_top.jpg' %}

Press Ctrl+Shift+R . Press these 3 keys together

Django Static Url Error, Not Loading

I'm currently mad at Django (1.9) right now! The saddest thing is 'Static URL' is the one giving me problem. 'Media URL' is working fine, no problem, but the static url is giving a huge headache.
in my settings_dev.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PROJECT_PATH = os.path.abspath(os.path.dirname(__file__))
STATIC_ROOT = os.path.join(PROJECT_PATH,'../static/')
STATIC_URL = '/static/'
when I add the below tag:
{% load static from staticfiles %}
<script type="text/javascript" src="{% static 'datepicker/js/bootstrap-datepicker.js' %}"></script>
The js file won't load. when I check my source code, it will display the below link.
<script type="text/javascript" src="/static/datepicker/js/bootstrap-datepicker.js"></script>
And when I click it will redirect me to
http://127.0.0.1:8000/static/datepicker/js/bootstrap-datepicker.js
And display
Page not found (404)
Request Method: GET
Request URL: http://127.0.0.1:8000/static/datepicker/js/bootstrap- datepicker.js
Now, I adjusted my urls.py to
if settings_dev.DEBUG:
# static files (images, css, javascript, etc.)
urlpatterns += patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings_dev.MEDIA_ROOT, 'show_indexes': True}),
(r'^static/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings_dev.STATIC_ROOT, 'show_indexes': True}),
)
Yet, I'm still getting the same error!! Page not found issues.
Project Directory
PROJECT NAME: Book/
SUB DIRECTORY:
media
static
Template
book
bookapp
manage.py (this is a file)
What am I missing?

Okay to make things clear for you.
STATIC_ROOT is that directory where all your static data gets collected when you want to serve your files on another server, say APACHE or NGINX or maybe on Heroku or so.
If don't want just want to run your web-app on your local development server, you don't require python manage.py collectstatic and hence you don't need STATIC_ROOT.
All you need is STATIC_URL and in case you have your static files at some other location as well then you also need STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"),].
So you'll be having a folder named `static' at the base directory level where django will look for your static files.
If you specify the same folder for STATIC_DIRS and STATIC_ROOT then you'll automatically get an error. Django won't allow you to do that as technically you are trying to give the same directory for two different purposes.
See this for a detailed explanation -> Differences between STATICFILES_DIR, STATIC_ROOT and MEDIA_ROOT

STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"),]
That line is enough for serving your project static folder files... And you have to set this in your urls.py
urlpatterns = [
...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Django : Static content not found

I have been breaking my head over this for a full day but can't figure out the problem. It happened after I copied my project from one machine to another.
Settings.py
STATIC_URL = '/static/'
STATIC_ROOT = 'staticfiles'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
Mentioned 'django.contrib.staticfiles' in INSTALLED_APPS as well.
Folder structure :
Django-Projects (root)
project
app
static
css
home.css
js
manage.py
Template :
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/home.css' %}">
urls.py
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
url(r'', include('app.urls')),
)
It throws an error in the console on opening the template :
GET http://127.0.0.1:8000/static/css/home.css
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
What might be wrong here ? Please help me out. Much thanks!

In your settings.py
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
STATIC_URL = '/static/'
Then in your template file:
<link rel="stylesheet" href="{{ STATIC_URL }}css/home.css">
With the directory root structure that you have shown, I think the above setting should work. Have not tested it though. Let me know if it works.

set DEBUG=True and see if it works .. this means, django will serve your static files, and not httpserver which in this case doesnt exist since you run the app locally.

I had researched this problem for a full day. This will be okay:
DEBUG = True
ALLOWED_HOSTS = []

Django default BASE_DIR will search static content for you. But in your case you changed the way before initial project. So for that in your case you have to change your BASE_DIR like this .. then only static file will serve correctly
BASE_DIR = os.path.dirname(os.path.abspath(__file__) + '../../../')
Updated:
I didn't see that comment. ! DEBUG = True only for development and You set as False so will django use STATIC_ROOT = 'staticfiles' to serve the static content on the production environment ... Thank you

You don't have to refer to STATIC_ROOT = 'staticfiles'
Just Like that:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)

I had the same issue in Django.
I added to my settings: STATIC_ROOT = 'static/'
It was the only problem.