Django CSS Not Loaded in Vercel app

[Sahil Gupta]

 

after deploying it show css files and images file on vercel but it not appearedon the web app. 

 

vercel.json

settings.py 
only pasting the relevant changes for vercel

ALLOWED_HOSTS = ['.vercel.app', '.now.sh', '127.0.0.1', 'localhost']

STATIC_URL = '/static/'

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

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

build_files.sh

#!/bin/bash

echo "BUILD START"

python3 -m pip install --upgrade pip  # Ensure the latest pip version

python3 -m pip install -r requirements.txt  # Install all dependencies

python3 manage.py collectstatic --noinput --clear  # Collect static files

echo "BUILD END"

my django web app is running fine on local sever with css and images, but on vercel it shows only HTML, no css and no images. my vercel app link : https://portfolio-bqgy3ipxf-sahilgupta245s-projects.vercel.app/ github repository link : https://github.com/sahilgupta245/portfolio

[N'BE SORO]

you can look at my urls.py and add the missing path to yours.
https://github.com/nbesoro/techyao/blob/main/core/urls.py#L27 

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/d46b2ce2-554f-4ceb-ad4e-96cbdaf0e2a6n%40googlegroups.com.

[REAL LIFE]

Hi Sahil,

Thanks for sharing the details about your deployment issue. It looks like you're encountering some problems with the CSS and image files not showing up on the web app after deploying to Vercel. I think it would be beneficial for us to review the build script together for any potential issues.

Let me know when you're available to go through it, and we can hopefully troubleshoot this together!

Best,  
Ashish

--

[Yogesh Medthiya]

install whitenoise

run python manage.py collectstatic after all this changes i should work

 echo "BUILD START"

 python3.12 -m pip install -r requirements.txt

 python3.12 manage.py collectstatic --noinput --clear

 echo "BUILD END"

ALLOWED_HOSTS = ['*']

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',

]

STATIC_URL = '/static/'

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

MEDIA_URLS ='/media/'

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

STATICFILES_DIRS = [

    BASE_DIR / "static",

]

STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"