Search code examples
pythonreactjsflaskheroku

ReactJS + Flask working on local but not on Heroku

I can't figure out how to display my React App on Heroku.

On my local computer I do npm run start for the React part and then I go to the Flask folder and do py app.py.

My project structure is:

project
 - client 
  - build
  - node_modules
  - public
  - src
  - package.json
  - package-lock.json
 - app.py
 - Procfile
 - requirements.txt

So I created an Heroku app and pushed everything. At first it was working but the React app wasn't displaying it was only the Flask server answer, then I did some modifications like I saw on similars posts (basically added the static_folder + static_url_path + errorHandler and now my app.py is like this


    import flask
    from flask import Flask, render_template, request, redirect, Response, send_from_directory
    import json
    import logging.handlers
    import os
    from bson.json_util import dumps
    from flask_cors import CORS
    from werkzeug.utils import secure_filename
    import pandas as pd
    import sys
    import io
    import csv
    
    UPLOAD_FOLDER = './uploads'
    STATIC_FOLDER = './client/build'
    
    app = flask.Flask(__name__, static_folder='.client/build', static_url_path='/')
    app.secret_key = 's_e_c_r_e_t'
    app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
    CORS(app) # CORS
    
    
    @app.route('/', methods=['GET'])
    def home():
        return app.send_static_file('index.html')
    
    @app.errorhandler(404)
    def not_found(e):
        return app.send_static_file('index.html')
        
    if __name__ == "__main__":
        app.run(host='0.0.0.0', port=80, threaded=True)

but now all I get is an internal server error, can someone help me ?

[logs]

2021-06-27T09:14:01.112325+00:00 heroku[web.1]: Starting process with command `gunicorn app:app`
2021-06-27T09:14:03.948938+00:00 app[web.1]: [2021-06-27 09:14:03 +0000] [4] [INFO] Starting gunicorn 20.1.0
2021-06-27T09:14:03.949683+00:00 app[web.1]: [2021-06-27 09:14:03 +0000] [4] [INFO] Listening at: http://0.0.0.0:33615 (4)
2021-06-27T09:14:03.949803+00:00 app[web.1]: [2021-06-27 09:14:03 +0000] [4] [INFO] Using worker: sync
2021-06-27T09:14:03.955150+00:00 app[web.1]: [2021-06-27 09:14:03 +0000] [7] [INFO] Booting worker with pid: 7
2021-06-27T09:14:04.042602+00:00 app[web.1]: [2021-06-27 09:14:04 +0000] [8] [INFO] Booting worker with pid: 8
2021-06-27T09:14:05.492057+00:00 heroku[web.1]: State changed from starting to up
2021-06-27T09:14:29.000000+00:00 app[api]: Build succeeded
2021-06-27T09:21:45.423207+00:00 heroku[router]: at=info method=GET path="/" host=projet-bachelor.herokuapp.com request_id=94624b44-ea88-491d-830c-610285d569da fwd="31.10.171.236" dyno=web.1 connect=0ms service=16ms status=500 bytes=495 protocol=https
2021-06-27T09:21:45.423462+00:00 app[web.1]: 10.37.182.10 - - [27/Jun/2021:09:21:45 +0000] "GET / HTTP/1.1" 500 290 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36"

2021-06-27T09:21:45.423207+00:00 heroku[router]: at=info method=GET path="/" host=projet-bachelor.herokuapp.com request_id=94624b44-ea88-491d-830c-610285d569da fwd="31.10.171.236" dyno=web.1 connect=0ms service=16ms status=500 bytes=495 protocol=https
2021-06-27T09:21:45.423462+00:00 app[web.1]: 10.37.182.10 - - [27/Jun/2021:09:21:45 +0000] "GET / HTTP/1.1" 500 290 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36"
2021-06-27T09:22:58.213996+00:00 heroku[router]: at=info method=GET path="/" host=projet-bachelor.herokuapp.com request_id=ec593fd3-4baf-402c-a8e5-1dd5dfec6098 fwd="31.10.171.236" dyno=web.1 connect=1ms service=8ms status=500 bytes=495 protocol=https
2021-06-27T09:22:58.262772+00:00 app[web.1]: 10.69.232.207 - - [27/Jun/2021:09:22:58 +0000] "GET / HTTP/1.1" 500 290 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36"
2021-06-27T09:24:29.546947+00:00 app[web.1]: 10.51.248.89 - - [27/Jun/2021:09:24:29 +0000] "GET / HTTP/1.1" 500 290 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36"
Solution

  • The path assigned was wrong, please remove the ./, the static and upload folders are in the root directory

    import flask
from flask import Flask, render_template, request, redirect, Response, send_from_directory
import json
import logging.handlers
import os
from bson.json_util import dumps
from flask_cors import CORS
from werkzeug.utils import secure_filename
import pandas as pd
import sys
import io
import csv

UPLOAD_FOLDER = 'uploads'
STATIC_FOLDER = 'client/build'

app = flask.Flask(__name__, static_folder=STATIC_FOLDER, static_url_path='/')
app.secret_key = 's_e_c_r_e_t'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
CORS(app) # CORS


@app.route('/', methods=['GET'])
def home():
    return app.send_static_file('index.html')

@app.errorhandler(404)
def not_found(e):
    return app.send_static_file('index.html')
    
if __name__ == "__main__":
    app.run(host='0.0.0.0', port=80, threaded=True)