Deploying a React app with a Flask backend to Heroku (in the same repo)

Question

I'm hoping to deploy my React App with a Flask API backend to Heroku. It's all located in the same repo, and currently I'm proxying requests in my package.json

The current app architecture is this

api -> flask api 
public
src -> react code
package.json

My Flask API includes

app = Flask(__name__, static_folder='../build', static_url_path='/')
@app.route('/')
def index():
    return redirect(url_for('static', filename='index.html'))
...
# API code/endpoints

I want to build my React project and have the Flask API host it. Then all requests will hit the Flask endpoints. My app uses the Spotify API for auth and needs env variables for this. Does it make sense to host this all in one Heroku app or should I just break it up into a React & Flask app and deploy the repos separately?

Thanks!

Answer 1

I have just seen your question. Recently I also worked on a similar kind of project personally.

In my case, I deployed them separately. First I deployed FLASKApi to Heroku referring to this youtube video and then I deployed my react js app

For my reactjs app deployment, I referred to this youtube video

Hope those videos help you too :)