DEV Community

Cover image for Deploying React-Django App using Heroku

Deploying React-Django App using Heroku

Muhammad Rahiman on December 06, 2020

React-Django-Heroku Web App Deployment Introduction This is a simple Todo web application built using React.js (front-end) an...
Collapse
 
austinroose profile image
austinroose

What if MIME type error remains after changing view content_type. I am using Django's TemplateView, but logic should remain same. TemplateView.as_view(template_name="index.html", content_type="application/javascript"), but MIME error is still there?

Collapse
 
mdrhmn profile image
Muhammad Rahiman

Hi there! My sincere apologies for the terribly late reply (was busy with studies so didn't have much time with blogging). I believe that this particular guide is outdated due to frequent updates from both Django and React that may tamper with its success. If I have the time, I will redo the project and update the guide. In the meantime, I highly recommend you refer to other tutorials and guides as well, such as one from Digital Ocean.

Again, really sorry for the trouble!

Collapse
 
mdrhmn profile image
Muhammad Rahiman • Edited

Have you added the Assets CBV that I mentioned? I personally struggled with the MIME type issue for a long time myself.

I also found a suggestion that adding '' at the HTML head can do the trick as well. Worth a try.

P.S. I just realised that the markdown formatting for the post previously was a bit botched. Fixed it already

Collapse
 
synerjay profile image
Jerome Tolentino

Have you found a solution to this? I have a similar problem..

Collapse
 
duncanjake1 profile image
Duncan Jacobsen

My app successfully built using the Heroku CLI, but when I went to my app on herokuapp.com, I got the message "Not Found: The requested resource was not found on this server."

After digging through the dev tools on the page, I discovered that none of the front end code was present at all. Any clues as to why this may be happening?

Collapse
 
mdrhmn profile image
Muhammad Rahiman

Hi there! My sincere apologies for the terribly late reply (was busy with studies so didn't have much time with blogging). I believe that this particular guide is outdated due to frequent updates from both Django and React that may tamper with its success. If I have the time, I will redo the project and update the guide.

In the meantime, I highly recommend you refer to other tutorials and guides as well, such as one from Digital Ocean.

Again, really sorry for the trouble!

Collapse
 
synerjay profile image
Jerome Tolentino

I have the same problem. Have you fixed this ? This author's methods are NOT complete.

Collapse
 
duncanjake1 profile image
Duncan Jacobsen

The author has the following line in his urlpatterns in backend/urls.py. I believe I just had to add that line to my project to get it to work.

re_path('.*', TemplateView.as_view(template_name='index.html'))

Collapse
 
mdrhmn profile image
Muhammad Rahiman

Yes, some of the methods were confusing admittedly. I recalled at the time of developing this side project, I encountered a lot of issues after deploying it on Heroku. Much time has passed since I published this, so my intuition is that the frequent updates from both Django and React will further exacerbate the issue (these 2 don't really get along well to be honest)

If I have the time, I will redo the project and update the guide ASAP. My apologies for the inconveniences caused!

Collapse
 
tnmy2426 profile image
TanmoY

I have followed your doc. And my app built successfully on Heroku. But it's still showing me a MIME type error. I have added Assets CBV which you mentioned.
Here is my app link: web-coders-blog.herokuapp.com/
now check the console and that error. And if you can then help here.

Collapse
 
jcinco profile image
Jake

Hi, you mentioned at the beginning there are two ways. Sorry I might have missed it but which one did you follow in this article?

I've completely separated my django and react, hosted as 2 different apps on heruko. Local is fine, but I can't get my deployed frontend react app proxy api requests to django. Also, is there a way to display error in chrome console similar to that when you're viewing it locally?

Collapse
 
mdrhmn profile image
Muhammad Rahiman

Hi there! My sincere apologies for the terribly late reply (was busy with studies so didn't have much time with blogging). I believe that this particular guide is outdated due to frequent updates from both Django and React that may tamper with its success. If I have the time, I will redo the project and update the guide.

For your question, I'm using the first approach.

In the meantime, I highly recommend you refer to other tutorials and guides as well, such as one from Digital Ocean.

Again, really sorry for the trouble!

Collapse
 
mdjahidhasan profile image
MD Jahid Hasan

I create a app using method 2. Can you give me a solution how to deploy this application in heroku?

Collapse
 
danidiaztech profile image
Daniel Diaz

Saved!

Collapse
 
abdenasser profile image
Nasser El Idrissi

you can also save lot of time scaffolding your Django Rest APi with the help of github.com/Abdenasser/dr_scaffold
It is based on DRF as well