Can't integrate dist folder from React+Vite(Frontend) to Django Application(Backend)

97 Views Asked by At

I am building a SAAS application and I am using React + Vite as frontend and Django for Backend , I was testing authentication system by integrating build or dist folder after performing npm run build in FRONTEND application and copying it in Django's project directory

  1. I have updated my settings.py TEMPLATES constant :
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'dist')],
        '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',
            ],
        },
    },
]
  1. I added STATIC FOLDER SETTINGS :
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static_root')
STATICFILES_DIRS = [BASE_DIR / "static"]
  1. I ran python manage.py collectstatic command

  2. I updated my project's urls.py file

rom django.contrib import admin
from django.urls import path,include,re_path
from django.views.generic import TemplateView
from django.conf import settings
from django.conf.urls.static import static


urlpatterns = [
  path('admin/', admin.site.urls),
  path('auth/', include('djoser.urls')),
  path('auth/', include('djoser.urls.jwt')),
]
urlpatterns+=[re_path(r'^.*',TemplateView.as_view(template_name='index.html'))]

if settings.DEBUG:
  urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Not sure when I do python manage.py runserver , I am getting this in console and my frontend is not loaded

localhost/:12 Refused to apply style from 'http://localhost:8000/assets/index-229ba335.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
index-bb014e79.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Can anyone provide me a solution or guide to tackle this error or fix it.

0

There are 0 best solutions below