My frontend is a React app that I compiled using npm run build. Once the build folder is copied to the django project, I go in my Django virtualenv and run python3 manage.py collectstatic and python3 manage.py runserver

When I run the server, I can read two errors in the console:

Loading module from “http://127.0.0.1:8000/assets/index-sLPpAV_Z.js” was blocked because of a disallowed MIME type (“text/html”).
The resource from “http://127.0.0.1:8000/assets/index-6ReKyqhx.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

and one warning:

Loading failed for the module with source “http://127.0.0.1:8000/assets/index-sLPpAV_Z.js”.

(Django) settings.py

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'build/static'),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

package.json

...
"scripts": {
    "dev": "vite",
    "build": "rm -rf ../backend/build && tsc && vite build && cp -r build ../backend/build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
...

I am confuse because there is no static folder in the build folder. Django gives me this warning:

WARNINGS:
?: (staticfiles.W004) The directory '/home/user/project/backend/build/static' in the STATICFILES_DIRS setting does not exist.

The build folder looks like this:

build/
----assets/
--------index-<randomString>.css
--------index-<anotherString>.js
----index.html
----vite.svg

Note: I run everything locally

0

There are 0 best solutions below