Forums

404 manifest.json (Django + React)

Hello,

I'm doing everything exactly like this tutorial says:

help.pythonanywhere.com/pages/React/

Page is loading, but in browsers console getting an error:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (manifest.json, line 0)

How to fix this?

settings.py:

from pathlib import Path
from dotenv import load_dotenv
import os

load_dotenv()

BASE_DIR = Path(__file__).resolve().parent.parent

SECRET_KEY = os.getenv("DJANGO_SECRET_KEY")

DEBUG = os.getenv("DJANGO_DEBUG") == "True"

ALLOWED_HOSTS = ['artman.pythonanywhere.com']

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'finapp.urls'

FRONTEND_DIR = BASE_DIR / "frontend"

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            FRONTEND_DIR / "build",
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'finapp.wsgi.application'

DATABASES = {
    'default': {
        'ENGINE': os.getenv("DB_ENGINE"),
        'NAME': os.getenv("DB_NAME"),
        'USER': os.getenv("DB_USER", ""),
        'PASSWORD': os.getenv("DB_PASSWORD", ""),
        'HOST': os.getenv("DB_HOST", ""),
        'PORT': os.getenv("DB_PORT", ""),
    }
}

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True

STATIC_ROOT = '/home/artman/finapp/static'
STATIC_URL = 'static/'
STATICFILES_DIRS = [
    FRONTEND_DIR / "build/static",
]

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

MEDIA_ROOT = '/home/artman/finapp/media'
MEDIA_URL = '/media/'

urls.py:

from django.contrib import admin
from django.urls import path, include
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path("", TemplateView.as_view(template_name="index.html")),
]

What is your static files config?

In the "Web" tab, if that's what you mean, like the tutorial suggests:

URL                    Directory
/static/               /home/artman/finapp/frontend/build/static

All the other files are basic ones, created by 'npx create-react-app' and 'npm run build'.

Do you see the files you expect in the directory if you run ls /home/artman/finapp/frontend/build/static ?

yes, everything is there

(finapp_env) 18:35 ~/finapp/frontend/build (master)$ cd static/
(finapp_env) 18:36 ~/finapp/frontend/build/static (master)$ ls
css  js  manifest.json  media
(finapp_env) 18:36 ~/finapp/frontend/build/static (master)$ find . -type d -name '.git' -prune -o -print | sed -e 's;[^/]*/;
|____;g;s;____|; |;g'
.
|____media
| |____logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg
|____js
| |____main.68afa4bf.js
| |____main.68afa4bf.js.map
| |____787.cda612ba.chunk.js.map
| |____787.cda612ba.chunk.js
| |____main.68afa4bf.js.LICENSE.txt
|____manifest.json
|____css
| |____main.073c9b0a.css.map
| |____main.073c9b0a.css

the app is working, you can check it yourself at: artman.pythonanywhere.com

this is the default react app, I didn't change a thing.

Can we have your permission to have a look at your files?

yes, please ^_^

Your manifest.json file is here: https://artman.pythonanywhere.com/static/manifest.json

Ok, but how can I get rid of an error?

Which of your sites are you seeing that error on? I visited both of the ones that you have configured on the "Web" page, and neither shows any errors about manifest.json in the developer console when I do so.

O_o

I literally have this error everywhere:

both on untouched default React App at artman.pythonanywhere.com and on edited App at www.artemfurman.tech/receiptapp

Tried on Safari, Brave on MacOS and on separate Windows machine on Chrome. The same error when serving React app with Django locally. Only when running app on development server with 'npm start' seeing no error.

I'm no crazy ^_^

Proof screenshots:

https://ibb.co/84yFTvQ - Brave

https://ibb.co/fYTPs6M - Brave

https://ibb.co/vPDZyqT - Safari

https://ibb.co/HB6CX3y - Safari

https://ibb.co/sRbp97d - Safari localhost 127.0.0.1:8000/receiptapp

https://ibb.co/wJRJ9N7 - separate machine Windows Chrome

https://ibb.co/CnK2NCD - 'npm start' no error here

Thanks! I was expecting something on the front page, so the www.artemfurman.tech/receiptapp link was useful.

I think I've worked out what is going on here. The 404 error is harmless as far as I can see, so I don't think we'd ever drilled into the underlying cause. What's happening is that create-react-app puts manifest.json in the "build" directory, not in the "build/static" one. I actually can't quite see how it wound up in your directory /home/artman/avatar/staticfiles -- did you perhaps copy it there while trying to debug this issue?

Either way, the fix, I think, is to add an extra line to the static files table. The URL should be "/manifest.json" and the "directory" (which is misnamed in this instance) should be "/home/artman/finapp/frontend/build/manifest.json".

Could you try that out and see if it fixes the problem? If so, we can update the docs to add that on.

OMG! Thank you so much! I was losing my mind over this for a whole week and almost gave up. There are dozens of pieces of advice on the web about this and nothing was helpful enough. Such a relief! Thank you again for your quick support! Big fan of PyA ;-)

I actually can't quite see how it wound up in your directory /home/artman/avatar/staticfiles -- did you perhaps copy it there while trying to debug this issue?

I tried everything, including moving manifest.json to the 'build/static' folder and running 'collectstatic'. That's how it got there. :-D

Any ideas on how I can configure the same branch on my local machine?

Also, can I add multiple React apps to my Django in the same manner? Will they not conflict with each other in the static files table? This approach might look weird (or maybe it doesn't, I'm not sure? ^_^), but for my job search portfolio, it seems to be perfect :-D

Glad we could get there in the end!

I'm not sure how you'd set that up locally. For multiple apps on the PythonAnywhere side -- yes, they could conflict on the static files table. But you should be able to create (say) app1_static, app2_static, and so on, each mapping to a different subdirectory. I'm not sure how you'd configure that on the React side, though. Let me ask our in-house React expert to see if she has some ideas.