Deploying React and Django on Heroku

Question

I've been hitting my head against this problem for a while and can't seem to figure it out. I'm trying to deploy a Django app to heroku where the front end uses react. I'm pretty new to react so it's possible I'm missing something fundamental here.

I have one heroku app right now that has two buildpacks (heroku/nodejs and heroku/python). To run the app locally I use python manage.py runserver along with node server.js on port 3000. I know Heroku only lets one port receive HTTP requests so I think the problem is there.

My main question is: To use Django and React on a Heroku app do I need to have two separate apps (one for django and one for react) or can I maintain only one app?

I've been searching through this repository and it seems like only one app is used. However I can't see how the node server is working.

Thanks for any clarification or a push in the right direction! Let me know if I need to clarify my question.

Edit: A couple other things I've tried:

Following this tutorial
Adding a heroku-postbuild script to my package.json file that starts the node server. This prevents the build process from continuing to start the django app though.
I came across this blog post too but it seems like I'm getting conflicting information on if the apps can be in the same Heroku app or must be different (like in the tutorial from #1).

I've implemented React and Django in just one application, using Django Rest Framework for API calls from the front end. As @taylorc93 said, you only need Node for server side rendering. — Jad S
– Jad S, Commented Dec 20, 2016 at 22:08

taylorc93 · Accepted Answer · 2016-12-20 19:12:12Z

5

Unless you plan on implementing server side rendering (not advisable if you're new to react), you only need one server.

What you're missing is a way to generate a javascript bundle that contains all of your react code. Then, you can ship that bundle over to the client like you would any other HTML/CSS/JS file.

Try using a tool like webpack to generate a javascript bundle. If possible, put it in the heroku-postbuild step, if not, just generate the bundle before deploying the updates

answered Dec 20, 2016 at 19:12

taylorc93

3,7162 gold badges22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kevin.w.johnson Over a year ago

Thanks for the response! I am currently using webpack along with django-webpack-loader. The bundles are generated but I don't believe I'm serving them correctly.

taylorc93 Over a year ago

Hmmmm... Are you getting any error messages? Can you post your webpack config + relevant django settings (owaislone.org/blog/webpack-plus-reactjs-and-django/#settings-py)?

Jad S Over a year ago

Do other static files get served? What if you just put a javascript file with console.log("hello world") and try to serve that in your HTML. Does it work? If not, the issue could be related to how Django serves static files.

vpontis Over a year ago

If you end up doing server side rendering, you still only need one server. I wrote a blog post outlining this: blog.victorpontis.com/server-side-react

Collectives™ on Stack Overflow

Deploying React and Django on Heroku

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related