how to deploy django/react app to heroku with different directory structure

user_9885901 0
Viewed 1110

I have a django/react app I created using this tutorial here

Although slightly different, I then tried to deploy my app to heroku using this tutorial here

The directory structure following the tutorials are different though. My directory structure is as follows...

django-todo-react/
  backend/
    backend/
    todo/
    manage.py
    ...
  frontend/
    all my react stuff...

in my django-todo-react folder (the project root directory) I have requirements.txt, Procfile, package.json, and '.gitignore` file.

To my understanding the Procfile should contain something like web: gunicorn backend.wsgi but because my Procfile is in the root directory I do instead the following web: gunicorn backend/backend.wsgi that looks very weird but basically I go into my backend folder where I have my actual backend project I started with django-admin startproject backend and get wsgi.

I added all the other stuff from the second tutorial I mentioned this one but still no such luck. I get a COLLECT_STATIC error and if I silence the error everything passes but I then get a application error when opening my heroku app.

I have already tried deploying an app just using the 2nd tutorial and all worked fine but that had the directory structure of the second tutorial. I thought that changing my Procfile to have web: gunicorn backend/backend.wsgi would point to the right thing.

So I basically just want to have a server folder which in my case is my backend folder and a client folder which for me it's frontend. This is not working for me though.

reactjs heroku deployment django
2 Answers

Gunicorn expects Python-like paths, so in your case using web: gunicorn django-todo-react.backend.backend.wsgi in Procfile should work.

user_11655090

So I've been trying to figure out the solution to my problem and see that after carefully reading the console for any errors that collectstatic is not finding my static folder. It looks for my static folder from within the Django project then a frontend folder, a build folder, and lastly a static.

My Django project does not have a frontend folder so instead of creating my react app in the root of my directory I create it in my Django project and make sure to run yarn build so that my frontend folder contains the build/static

This works fine so if anyone is having an issue with a similar thing I hope this helps. Also, my question still stands on how to get it working with having two separate directories one for my backend and one for my frontend. I am pretty sure it has to do with the STATIC_DIRS but that is just a guess

user_98859010
Related