My link to manifest.json in index.html works when I run react script 'yarn start', but not when I run 'python3 manage.py runserver'

Viewed 2983

When I run 'yarn start', my link to manifest.json in my index.html file works fine, but when I run 'python3 manage.py runserver' all I get in the terminal is:

Not Found: /manifest.json
"GET /manifest.json HTTP/1.1" 404 2234

This also happens to all of my static links and imports. I'm pretty new to Django and React, and programming as a whole, so I think that I'm just missing something simple, but I can't figure it out.

I've been trying to use {% load static %}, but the link doesn't work, even if I edit STATIC_URL in settings.py to point towards my manifest.json directory. I also attempted to edit view.py and urls.py, but all I get is syntax errors in the terminal. Other than that I'm clueless.

frontend/public/index.html

<html>

    <head>

    <title>WebProject</title>


    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">

    <link rel="manifest" href="manifest.json"/>

    </head>

    <body style="background-color: #FAF0E6; font-family: Verdana; font-size: 40px;">
    <div id="root"></div>

    </body>

</html>

frontend/urls.py


from django.urls import path
from . import views
from django.conf.urls.static import static


urlpatterns = [
    path('', views.index),

]

frontend/views.py

from django.shortcuts import render

def index(request):
    return render(request, 'frontend/public/index.html')

I expected my browser to load manifest.json properly, along with any other links or imports, but I keep getting a blank page.

Im using React inside of Django, so when I tried to import my index.js the same "Not Found" terminal error popped up. Im assuming that if I solve the manifest.json problem, I'll also solve my other import and link problems.

3 Answers

The same happened to me (blank page and unable to load manifest.json + react build's static files) and I solved the issues thanks to this excellent article

Solution -> assuming your react app (build etc.) are in a folder called frontend at the same level as your django project, in your settings.py file you need to make sure your STATICFILES_DIRS variable is set like below (don't forget the trailing coma as it is a tuple).

STATICFILES_DIRS = (
    os.path.join(os.path.join(BASE_DIR, 'frontend'), 'build', 'static'),
)

In urls.py:

from django.urls import re_path

CHANGE: urlpatterns = [ ... path('', TemplateView.as_view(template_name='index.html')]

TO:

urlpatterns = [ ... re_path('.*', TemplateView.as_view(template_name='index.html')]

Had the same error and worked for me.

Related