Flask + React App Fails When Deployed to Heroku

Question

I am trying to deploy a simple flask + react project to heroku. I am using gunicorn. The application works when deployed locally but fails on Heroku. The issue lies within trying to serve static files from the build folder but I cannot find out what the problem is.

Here is the relevant code

#app.py

app = Flask(__name__,
            static_folder='build',
            static_url_path='/')

@app.route('/')
def serve():
        return app.send_static_file('index.html')

Heroku logs:

2020-12-16T12:04:52.431434+00:00 app[web.1]: [2020-12-16 12:04:52,429] ERROR in app: Exception on / [GET]
2020-12-16T12:04:52.431438+00:00 app[web.1]: Traceback (most recent call last):
2020-12-16T12:04:52.431438+00:00 app[web.1]: File "/app/.heroku/python/lib/python3.6/site-packages/flask/app.py", line 1950, in full_dispatch_request
2020-12-16T12:04:52.431439+00:00 app[web.1]: rv = self.dispatch_request()
2020-12-16T12:04:52.431439+00:00 app[web.1]: File "/app/.heroku/python/lib/python3.6/site-packages/flask/app.py", line 1936, in dispatch_request
2020-12-16T12:04:52.431439+00:00 app[web.1]: return self.view_functions[rule.endpoint](**req.view_args)
2020-12-16T12:04:52.431440+00:00 app[web.1]: File "/app/app.py", line 17, in serve
2020-12-16T12:04:52.431440+00:00 app[web.1]: return app.send_static_file('index.html')
2020-12-16T12:04:52.431441+00:00 app[web.1]: File "/app/.heroku/python/lib/python3.6/site-packages/flask/helpers.py", line 1084, in send_static_file
2020-12-16T12:04:52.431441+00:00 app[web.1]: self.static_folder, filename, cache_timeout=cache_timeout
2020-12-16T12:04:52.431441+00:00 app[web.1]: File "/app/.heroku/python/lib/python3.6/site-packages/flask/helpers.py", line 767, in send_from_directory
2020-12-16T12:04:52.431442+00:00 app[web.1]: raise NotFound()
2020-12-16T12:04:52.431442+00:00 app[web.1]: werkzeug.exceptions.NotFound: 404 Not Found: The requested URL was not found on the server. If you entered the URL manually please check your spelling and try
again.

Directory structure:

ROOT
├── app.py
├── build
├── dbfiller.py
├── logs
├── media
├── node_modules
├── openacademia.db
├── package.json
├── package-lock.json
├── Procfile
├── public
├── __pycache__
├── README.md
├── requirements.txt
├── src
├── venv
└── yarn.lock

Procfile: web: gunicorn --bind 0.0.0.0:$PORT app:app

Let me know if anything else is needed

Answer 1

I had exactly the same problem for days. And I've just solved it a couple of hours ago thanks to the previous answer! In my case the .gitignore included (unfortunately) the /build folder and I didn't even realized about it. Moreover, I've moved the build folder from my frontend folder to my root. Even if the path of the static_folder was correct in the Flask called, Heroku seems that doesn't like to don't have the build folder in the root of your project.

In case this can help others, my react project use React Routing (Client-Side Routing) so in my App.js file the routes are like this to make to project work on Heroku (and not just on localhost):

return (
      <>
        <HashRouter>
          <Routes>
            <Route path="/profile/:name"
                   element={<Profile />} />
            <Route path="/"
                    element={<Login />} />
          </Routes>
        </HashRouter>
      </>
  );

I hope the previous answer is accepted for this problem because it was incredibly helpful.

Answer 2

I had the exact problem and ran into this question. Posting my solution, since I kept fiddling with my flask server code when the simple fix doesn't have to do with the server.

If you use React often, you likely have your /client/build folder in either your global or local .gitignore. When you are trying to deploy your app via git to Heroku, your flask server is being pushed to Heroku and running, but your front-end build folder isn't!

Either modify your folder structure/names (simply changing the /build folder name and serving the new location, if you don't want to change your .gitignore) or your .gitignore files to fix this issue.