Django doesn't detected my files and displays a blank HTML page

I'm new to React (TypeScript) and Django, my Vite-created React project runs flawlessly but when I tried to deploy it using Django, my files don't seem to get detected by it. I've literally tried every possible solution out there and spent 10+ hours on this and yet couldn't fix it because everything seems correct yet all I'm getting is a blank page.

Here is the error:

enter image description here Here is my project structure:

enter image description here

Here is the HTML file generated by the React build command:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI - Chatbot</title>
    <script type="module" crossorigin src="/assets/index-B5FpUC4l.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-C7NLutAK.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

This is proof that the requested files do exist in mentioned path: enter image description here

And finally, here is the relevant parts of code from my settings.py:

'DIRS': [
        os.path.join(BASE_DIR, 'ai', 'dist'),
        os.path.join(BASE_DIR, 'ai', 'dist', 'assets'),
    ],

STATIC_URL = '/static/'

VITE_APP_DIR = os.path.join(BASE_DIR, "ai")

STATICFILES_DIRS = [
    os.path.join(VITE_APP_DIR, "dist"),
    os.path.join(VITE_APP_DIR, "dist", "assets"),
]
STATIC_ROOT = os.path.join(BASE_DIR, "static")

And DEBUG = True. Thanks

Back to Top