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