Django/React Deployment only works if I set DEBUG=True & STATICFILES_DIRS not a list

Question

Trying to deploy my react frontend with django backend to pythonanywhere (PA) but get the following outcomes with the below 3 settings:

DEBUG=True, STATICFILES_DIRS=[os.path.join(BASE_DIR, 'build/static')] - (Blank white screen)

PA server log:

  File "/home/coot3/.virtualenvs/venv/lib/python3.8/posixpath.py", line 76, in join
    a = os.fspath(a)
TypeError: expected str, bytes or os.PathLike object, not list

Chrome console:

Refused to execute script from 'http://mysite.pythonanywhere.com/static/js/main.446b4eaa.chunk.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

DEBUG=True, STATICFILES_DIRS=os.path.join(BASE_DIR, 'build/static') - (Website works as intended)
DEBUG=False, STATICFILES_DIRS=os.path.join(BASE_DIR, 'build/static') - (Blank white screen)

No issues in PA Server log

Chrome console:

Refused to execute script from 'http://mysite.pythonanywhere.com/static/js/main.446b4eaa.chunk.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

I have the react app build folder in my django root folder and link to reacts index.html as a template view in urls.py. Here is my settings.py:

from pathlib import Path
import os
import environ

env = environ.Env(
    DEBUG=(bool, False)
)

environ.Env.read_env()

DEBUG = False

SECRET_KEY = env('SECRET_KEY')

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

HOSTS = ['coot3.pythonanywhere.com']

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

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    '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 = 'mysite.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_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 = 'mysite.wsgi.application'

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


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_L10N = True

USE_TZ = True

STATIC_URL = '/static/'

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

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

CORS_ORIGIN_ALLOW_ALL = True

EMAIL_USE_TLS = True

EMAIL_HOST = 'smtp.gmail.com'

EMAIL_PORT = 587

EMAIL_HOST_USER = env('EMAIL_HOST_USER')

EMAIL_HOST_PASSWORD = env('EMAIL_HOST_PASSWORD')

Glenn Glenn · Accepted Answer · 2020-09-17T14:37:41

Django does not serve static files when it's not in DEBUG mode. So you have to configure the static files mappings of your web app to serve static files. There is extensive help on static files on the PythonAnywhere help pages.

Django/React Deployment only works if I set DEBUG=True & STATICFILES_DIRS not a list

1 Answers