Static files not loaded when deploy a django web page in vercel(with whitenoise)

Question

when the project is deployed shows this error here is my settings.py:

import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent
DEBUG = True
ALLOWED_HOSTS = ['*']

INSTALLED_APPS = [
    'me',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    "whitenoise.runserver_nostatic",
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    "whitenoise.middleware.WhiteNoiseMiddleware",
    '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 = 'Matheus.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR, 'templates'],
        '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 = 'Matheus.wsgi.application'

...

STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / "staticfiles" / "static"

if DEBUG:
    STATICFILES_DIRS=['staticfiles']
    STATIC_ROOT = None
else:
    STATICFILES_DIRS=[]
    STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

# Whitenoise Storage Class  - Apply compression but don’t want the caching behaviour
STATICFILES_STORAGE = 'whitenoise.storage.CompressedStaticFilesStorage'

here is my vercel.json:

{
  "version": 2,
  "builds": [
      {
          "src": "Matheus/wsgi.py",
          "use": "@vercel/python",
          "config": {
              "maxLambdaSize": "15mb",
              "runtime": "python3.12"
          }
      },
      {
          "src": "build.sh",
          "use":"@vercel/static-build",
          "config":{
              "distDir": "staticfiles"
          }
      }
  ],
  "routes": [
      {
          "src":"/static/(.*)",
          "dest":"/static/$1"
      },
      {
          "src": "/(.*)",
          "dest": "Matheus/wsgi.py"
      }
  ]
}

here is my build.sh:

#!/bin/bash

# Update pip
echo "Updating pip..."
python3.12 pip install -U pip

# Install dependencies

echo "Installing project dependencies..."
python3.12 -m pip install -r requirements.txt

# Make migrations
echo "Making migrations..."
python3.12 manage.py makemigrations --noinput
python3.12 manage.py migrate --noinput
#Install whitenoise
echo Installing white noise..."
python3.12 manage.py whitenoise
# Collect staticfiles
echo "Collect static..."
python3.12 manage.py collectstatic --noinput --clear

echo "Build process completed!"```

wsgi config :

import os

from django.core.wsgi import get_wsgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'Matheus.settings')

application = get_wsgi_application()

# vercel config

app = application # add this line.

https://github.com/Matheus-Dimon/me/tree/teste

I want to a config to change that can make the deploy serves the staticfiles.

Answer 1

i found the solution with these configs: in vercel.json i change this :

"src": "build_files.sh",
  "use": "@vercel/static",
  "config": {
    "distDir": "staticfiles_build"

in settings.py this config:

STATIC_URL = 'static/'
STATICFILES_DIRS = os.path.join('me' , 'static'),
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

and url.py of app put this :

urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Answer 2

I did it this way when Debug is False...

In urls.py (the main one)

from django.conf import settings
from django.views.static import serve
from django.contrib import admin
from django.urls import path, include, re_path


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('main.urls')),
    re_path(r'^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),

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

For the settings.py... I did this:

STATIC_URL = '/static/'

MEDIA_URL = '/media/'



if DEBUG:

  STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

else:

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



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

If Debug is True, do it this way... urls.py:

from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, include
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('main.urls'))
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

settings.py

import os
...
...
...
STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / 'static/']
MEDIA_URL = '/media/'

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

Answer 3

Firstly check on vercel if you realy have folder staticfiles/static or static. I had not any despite of having python manage.py collectstatic in buildfiles.sh and distDir similary to yours in vercel.json. Static files of course have not worked (with DEBUG = False). So, firstly, I decided to change vercel.json in line 7 and make ditDir: 'static' like below:

{
  "builds": [
    {
      "src": "build_files.sh",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "static"
      }
    },
    {
      "src": "/czarny_kot/wsgi.py",
      "use": "@vercel/python",
      "config": { "maxLambdaSize": "15mb" }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "czarny_kot/wsgi.py"
    }

  ]
}

Secondly, i've deleted line with collectstatic from buildfiles.sh. After I set lines in settings.py like bellow:

STATICFILES_DIRS = [
    # ...
]

STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'static'

MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = '/media/'

my urls.py:

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', HomeViews.as_view(), name='home'),
    path('tinymce/',include('tinymce.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

Finally I run python manage.py collectstatic locally and after committed and pushed all stuff to github. As u can see on this page: czornykot.pl statics works - there is no lack of any static image, css, or js. Hope it's going to work on your page :)

edit: BASE_DIR / ... works if u have this in settings.py:

from pathlib import Path
BASE_DIR = Path(__file__).resolve().parent.parent

I'm using Whitnoise.

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    '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',
]