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

Morita Ichika · Accepted Answer · 2022-05-04 02:02:41Z

2

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.

answered May 4, 2022 at 2:02

Morita Ichika

214 bronze badges

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

2 Comments

Trunks159 Over a year ago

You are my savior

Morita Ichika Over a year ago

@Trunks159 hahah I'm so happy that this has helped you. To save some hours of frustration is always great

drdo · Accepted Answer · 2021-09-12 00:15:28Z

0

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.

answered Sep 12, 2021 at 0:15

drdo

331 silver badge7 bronze badges

Collectives™ on Stack Overflow

Flask + React App Fails When Deployed to Heroku

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related