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 · Accepted Answer · 2020-09-17 14:37:41Z

0

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.

answered Sep 17, 2020 at 14:37

Glenn

5,8362 gold badges21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eyad · Accepted Answer · 2021-12-20 09:34:45Z

0

Maybe my answer is late but at least it would help other people. For me whether i deploy on heroku or cPanel, i always use whitenoise.

pip install whitenoise
Add these in settings.py MIDDLEWARE = [ 'whitenoise.middleware.WhiteNoiseMiddleware', ]

You can see more of the documentation through this link

Make sure after each build you do for react, run python manage.py collectstatic :)

answered Dec 20, 2021 at 9:34

Eyad

11 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related