recently I'm starting to make a web application with React and Django. I installed react with vite.js(because it seems so fast in the development environment). and I connected it to Django web framework and ran it. and I thought It would show basic react page(you know, dark page and favicon is revolving ) However, contrary to my expectations, It only shows blank and I checked the console.log. the error message was this : Refused to apply style from 'http://127.0.0.1:8000/assets/index.cd9c0392.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
so I googled it and figure out that is a problem with the path in most cases. but when I check the my index.html in build file, path seems fine. below is my build folder structure and index.html, can you tell me what is wrong with my code or logic or both? thx for reading , your help will be appreciated.
frontend
-dist => this is build folder
--assets
---index.cd9c0392.css
---favicon.21sd12.js
.
.
.
--index.html
-node_modules
-src
-index.html
.
.
.
index.html(in dist)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/assets/favicon.17e50649.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<script type="module" crossorigin src="/assets/index.3e288fda.js"></script>
<link rel="modulepreload" href="/assets/vendor.dc18184a.js">
<link rel="stylesheet" href="/assets/index.cd9c0392.css">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
P.S I also get these following errors too which I assume same type of errors with above FYI.
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.
vendor.dc18184a.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.
main.jsx: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.
To use React with Django there are a few things you need to do.
In Django view.py you need to create a view which serves the HTML file to the user:
#views.py
from django.shortcuts import render
def index(request):
return render(request, 'path/to/html/file/index.html')
In the urls.py file you then need to create a path which tells Django what to do when you make a request:
#urls.py
from django.contrib import admin
from django.urls import path, re_path
from .views import index
#url patters is read from top to bottom
urlpatterns = [
path('admin/', admin.site.urls),
re_path('.*', index), #regex which says everything but admin/ will go to the index view
]
To access the page you would then go to http://127.0.0.1:8000 and it should display the .html file you specified in views.py