Flask + React Infinite Scroll
By: Spencer Porter
Tags: React, Programming, Web Development, Flask, Python

Backend

Our first task is setting up our backend. We will be using a basic Flask application using the Application Factory design pattern. Getting into a habit of using this structure will help when you get into larger project design and implementation, so the repetition is important.

Project Sandbox

We’ll start by creating a new project folder (mine is named InfiniteScroll), initializing a blank virtual environment (venv) and installing Flask.

After that, create an app directory and init file (app/__init__.py). This directory will hold the endpoints for our project as well as the function to initialize the application.

For our Flask initialization we have changed the default static and template folders. We do this in order to keep the complexity from having both Flask and React apps partitioned from one another. The aptly named create_app function takes the configuration name as an argument to initialize a Flask application with the given config variables. We will define these configurations next (in config.py):

The config file allows you to separate out different variables dependent on the deployment of your application. When we are developing in production, we don’t want to be using the development database, and vice versa. This way allows you to launch your application with the correct configuration for your deployment.

Application

Next up is our application file. This will use the create_app function we defined in our app directories __init__.py file (in application.py)

After that we will be creating our views before moving on to creating the base of our React application. Yet again we will be separating out our code to keep things organized and readable. In the app directory, create a subdirectory named main, along with an __init__ file and a views file. (in app/main/__init__.py)

Next, our views file (in app/main/views.py)

At this point we have referenced three things that don’t exist yet:

The templates folder The static folder The index.html file

But Why?

If you’re coming from a Jinja2 HTML/CSS/JS framework, this new form of development can be really daunting. Why do we have to make twenty different directories before I can even run a “hello world” page?

Because.

The fact is that this structure is best for larger projects. If you were just trying to do a single page with infinite scroll, vanilla HTML/JS would be perfect. The problem is that any project you’re going to be doing will be a lot more complicated than that, with both front-end and backend logic that needs to implemented. React is great in that it offloads some of the logic from the backend, and doesn’t force you to reload the page every single time you update something. It’s also great because you can get into a whole host of optimization patterns that make rendering your page a lot quicker than any other way.

Rant Over

With that out of the way, let’s get our React app up and running. Starting off, let’s create those static and templates directories. The static folder will be in the top level of the app directory, and the templates directory will be within static. Finally, we create an index.html file in that templates directory which will be what we are returning as our index route request.

Finally, the script tag will render the React app that we will be creating next.