Hosting Django And React with parcel bundler on Heroku

Question

I've been trying to host my Django rest application using react at the frontend with Parcel bundler, After a successful hosting, the styles and js are not loaded, with a MIME type error in the console:

Refused to apply style from 'https://minglemarket.herokuapp.com/src.aaba6b6a.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. minglemarket.herokuapp.com/:1 Refused to apply style from 'https://minglemarket.herokuapp.com/style.e1ff692e.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. minglemarket.herokuapp.com/:1 Refused to execute script from 'https://minglemarket.herokuapp.com/src.8d3ada04.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Answer 1

I had a similar issue with a Django/React/Django Restframework/Webpack site on Heroku. I got the same errors. I have actually had to fix it more than once, and I have fixed it two different ways. One way to fix the MIME type issues with static files,was setting up my frontend urls.py file as follows:

from django.urls import path, re_path
from django.views.generic import TemplateView

urlpatterns = [
    re_path(r'^robots\.txt$', TemplateView.as_view(
        template_name="frontend/robots.txt", content_type='text/plain')),
    re_path(r'^manifest\.json$', TemplateView.as_view(
        template_name="frontend/manifest.json", content_type='application/json')),
    re_path(r'^.*', TemplateView.as_view(
        template_name='frontend/index.html',
        content_type='text/html')),

The other way I was able to fix the issue was making sure I had a publicPath set in Webpack, I am not sure how that works with Parcel. I set it as publicPath: '/' in webpack, but it mainly just needed to be set to something.

I have used Parcel, but in the end the packages it served were so much bigger than webpack that I switched back to webpack.