How do I use Flask with React?

My project is to make a news aggregator with Flask (back end) and React (front end). Now AFAIK, to connect these two, my Flask app has to work like an API.
Now here are my questions:
1. Is there any other way to connect them?
2. I want to implement 'infinity scroll' just like in Google News. How would I do that if I were to follow API approach?

7 thoughts on “How do I use Flask with React?”

  1. 1. Yes. You can read [this article](https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/client-server-architectures/) series that talks about the three different ways to incorporate JS frameworks into Django (but still applies to Flask).

    2. You essentially use frontend javascript. When you first send a compiled template, you send, say, only 10 posts. When you scroll down to the tenth post, you run an API POST request to get more data.

    Reply
  2. \> Is there any other way to connect them?

    other way than using restful api on the backend side you mean? why?

    \> I want to implement ‘infinity scroll’ just like in Google News. How would I do that if I were to follow API approach?

    there can be different approaches to this depending on the system design, it’s kinda similar to how an ordinary data pagination would work. the first approach I can think of is if the window is scrolled by a certain amount or to a certain point you send a GET request to the backend requesting more data.

    Reply
  3. Why do you need React? What does that bring to the project? These frameworks seem to have a lot of overhead. At least in my experience.

    You can get pretty far with something like Bootstrap (handles all your mobile screen sizes and orientation) and JS. Build pretty much anything with Flask and a DB of your choosing.

    I use Postgres. It’s great. I’m a big fan.

    Reply
  4. When you are developing your project, you will want to add
    “`
    “proxy”: “http://localhost:5000”
    “`
    (or whatever other port you are using) to the end of the package.json in your react project and enable cors by adding [flask_cors](https://flask-cors.readthedocs.io/en/latest/) to your project.
    You should then be able to send requests to your flask api with axios in react. You will need to run both the flask server and the react project to make this work.

    When you are ready to build and deploy, you can build your react app with `npm build` and then point flask’s static folder to the react build folder like this:
    “`
    app = Flask(__name__, static_folder=’./frontend/build’, static_url_path=’/’)
    “`
    . To let flask know to send the react build, add an index route:
    “`
    @app.route(‘/’)
    def index():
    return app.send_static_file(‘index.html’)
    “`
    Adding a 404 handler that returns the index file allows you to access routes within your react app after you reload the page.
    “`
    @app.errorhandler(404)
    def not_found(e):
    return app.send_static_file(‘index.html’)
    “`

    Hope this helps 🙂

    Reply
  5. It’s probably not the best way to do it, but I use React on a few specific pages of my Flask app by importing it from a CDN. I write the React in TSX in my static folder, then compile it with babel. My flask template imports from the static folder.

    Reply
  6. I’m doing this actively now on a project.

    Flask-restful and React. I’m using Google Cloud Run for production. Virtually cost free to run my website since I have no users yet.

    React just uses axios to make requests to Flask, then Flask requests from the DB using the requests module.

    I love React FWIW. It’s super easy to use. HTML templates and Jinja always irritated me. Learning React has made life a lot easier. Idk what the other guy in this thread is talking about with overhead. HTML templates feel like way more overhead IMO.

    Reply

Leave a Comment