I have been attempting to launch my web page to vercel but continue to only display the actual index.html file without any of the static css or images. It works completely fine on local server even when debug is set to False. https://myportfolio-test3-g3s7r9p0n-reese-jennes-projects.vercel.app/
Here is the architectural layout of the project:
myportfolio/
├── main/
│ ├── pycache/
│ ├── migrations/
│ ├── static/
│ │ ├── css/
│ │ └── images/
│ └── templates/
│ └── index.html
├── myportfolio/
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── static/
│ ├── css/
│ └── images/
├── staticfiles/
├── manage.py
├── requirements.txt
├── db.sqlite3
└── vercel.json
My settings.py has the following code related to this issue:
INSTALLED_APPS = [
‘whitenoise.runserver_nostatic’,
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
‘main’,
]
MIDDLEWARE = [
‘whitenoise.middleware.WhiteNoiseMiddleware’,
‘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’,
]
STATIC_URL = ‘static/’
MEDIA_URL = ‘/images/’
STATICFILES_DIRS = [
os.path.join(BASE_DIR, ‘static’)
]
MEDIA_ROOT = os.path.join(BASE_DIR, ‘static/images’)
STATIC_ROOT = os.path.join(BASE_DIR, ‘staticfiles’)
This is my urls.py:
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path(‘admin/’, admin.site.urls),
path (‘’, include(‘main.urls’)),
]
urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root = settings.STATIC_ROOT)
My vercel.json:
{
“builds”: [{
“src”: “myportfolio/wsgi.py”,
“use”: “@vercel/python”,
“config”: { “maxLambdaSize”: “15mb”, “runtime”: “python3.9” }
},
{
“src”: “build_files.sh”,
“use”: “@vercel/static-build”,
“config”: {
“distDir”: “staticfiles_build”
}
}
],
“routes”: [
{
“src”: “/static/(.)",
“dest”: “/static/$1”
},
{
“src”: "/(.)”,
“dest”: “myportfolio/wsgi.py”
}
],
“outputDirectory”: “staticfiles”
}
And some of the sample html that uses the static css and image files:
{% load static %}
***ALSO for refrence, when I check the source of the files in the project deployment, I get the small reference flaw image for all of them. I am wondering what the mistake I am making is and what the fix is to make sure all of my static images and my css file become apparent on the page. Thank you in advance