8

Developing a django app with frontend react and serving the react build files with django. project structure is as everything works fine when in settings.py I have

DEBUG=True

However when I change it to DEBUG=False i get the following errors for static files in the console

The resource from “http://localhost:8000/static/js/2.285a2b2f.chunk.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The resource from “http://localhost:8000/static/css/main.dde91409.chunk.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The resource from “http://localhost:8000/static/js/main.eade1a0b.chunk.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The resource from “http://localhost:8000/static/css/2.03372da4.chunk.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The resource from “http://localhost:8000/static/js/2.285a2b2f.chunk.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

in my setting.py file I have also set the following

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS':  [os.path.join(BASE_DIR, 'frontend')],
        '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',
            ],
        },
    },
]

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'frontend', "build", "static"),  # update the STATICFILES_DIRS
)

PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')

Everything works fine except when DJango DEBUG is False Please can someone help me since I dont want to deploy the app with DEBUG=True

Richard Ochom
  • 485
  • 4
  • 16
  • You're putting the react JS files in the static files and not building an API? – martin Jun 24 '20 at 13:01
  • I don't think that that's how it works: Usually you'd use either pure django server-side rendering or django REST /GraphQL for an API and then fetch the data. But I've never seen a project with react forced in the static files... – martin Jun 24 '20 at 13:02
  • Iif I get your question right, my react codes access django via django-restframework, I'm however serving the build as template. since i plan to host the frontend within django – Richard Ochom Jun 24 '20 at 13:04
  • Well am using DRF and making API calls for data, however after building I read somewhere that I can serve the build files of react within django. It works fine if DEBUG=True. probel comes in when I change it to False – Richard Ochom Jun 24 '20 at 13:06
  • where are you deploying to? – martin Jun 24 '20 at 13:34
  • Heroku, I found where the error was eventually – Richard Ochom Jul 15 '20 at 21:32
  • I had the same problem moving from a Ubuntu 20.04 system to a MacBook – HenryM Jun 10 '21 at 11:37

4 Answers4

12

For anyone coming here from Google, you should probably see this question.

In summary, when Debug is off Django stops handling static files for you. Your production server should deal with this instead.

If you still want to run your server locally, you should use:

./manage.py runserver --insecure

This is obviously not secure in production, hence its name.

sebtheiler
  • 2,159
  • 3
  • 16
  • 29
2

After googling here and there, I realized that Heroku was running the script

python manage.py collectstatic

but not finding any static files for my react app because I had not committed the react build folder to git.

so adding the build folder to git and committing the changes made it work properly.

Richard Ochom
  • 485
  • 4
  • 16
0

Make sure You have address static files correctly also make sure you have been added / in end of directory in my case I forgot to add / to end of /usr/share/nginx/html/static/ and nginx thinks that /usr/share/nginx/html/static/ is file not a directory

location /static/ {
    alias /usr/share/nginx/html/static/;
    access_log off;
    error_log off;
    autoindex off;
    }
Bambier
  • 586
  • 10
  • 16
-1

credit to @stathoula , following her answer along with remark of @leopd by adding re_path to her answer, this worked for me by appending below code to the main urls.py at the end of all the rest of the code just add :

from django.urls import re_path
from django.views.static import serve


urlpatterns += (
re_path(r'^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),
re_path(r'^static/(?P<path>.*)$', serve,{'document_root': settings.STATIC_ROOT}),
)

then do "collectstatic":

python manage.py collectstatic
Adnan Sh
  • 31
  • 7