CODEWITHSUNDEEP
pythonreactjsdjangodjango-rest-framework
Veera Silamban
Veera Silamban

Reputation: 287

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

Upvotes: 2

Views: 791

Answers (1)

Faisal Nazik
Faisal Nazik

Reputation: 2873

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.

Upvotes: 1

Related Questions