How do I implement a ReactJS app into my Flask app?

Question

I have a ReactJS frontend with multiple routes. e.g.: /, /example1, example1/example2/example3/example4.

I have used the react-build script to make production build of the ReactJS app. Now I'm trying to incorporate the ReactJS app with the Flask app.

This is what I have so far on my Flask routes:

app = Flask(__name__, static_folder="./build", static_url_path="")
CORS(app)
app.secret_key = secret_key


@app.route("/", defaults={"path": ""})
@app.route("/<path:path>")
def serve(path):
    return app.send_static_file("index.html")

This works, but not for all routes. For example, /example1 and /example1/example2 work. But /example1/example2/example3 doesn't work. Any ideas? Thanks.

EDIT: It turns out that /example1/example2 does not work, meaning that the issue is to do with custom routes, which aren't predefined. All routes which I have specifically defined work, but the dynamically made ones don't.

Don't you want to do this: return app.send_static_file(path)? — Tim Ludwinski
– Tim Ludwinski, Commented Nov 10, 2020 at 16:20
When you say it doesn't work do you mean it returns a 404? If so I think Flask is unable to find the static file index.html, is the ./build location correct? — pgjones
– pgjones, Commented Nov 10, 2020 at 21:28

Manish Sahani · Accepted Answer · 2020-11-11 03:06:17Z

1

https://blog.miguelgrinberg.com/post/how-to-deploy-a-react-router-flask-application - this might help you for now, the tutorial has modified the 404 exception handler (Not really an elegant solution but works).

@app.errorhandler(404)
    def not_found(e):
    return app.send_static_file('index.html')

answered Nov 11, 2020 at 3:06

Manish Sahani

1861 silver badge7 bronze badges

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

1 Comment

eliasbenb Over a year ago

this worked! Obviously this isn't ideal, but it works. Thank you!

Collectives™ on Stack Overflow

How do I implement a ReactJS app into my Flask app?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related