CODEWITHSUNDEEP
node.jsdjangoreactjsheroku
kevin.w.johnson
kevin.w.johnson

Reputation: 1794

Deploying React and Django on Heroku

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:

  1. Following this tutorial
  2. 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.
  3. 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).

Upvotes: 6

Views: 3943

Answers (1)

taylorc93
taylorc93

Reputation: 3716

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

Upvotes: 5

Related Questions