Made withFlaskClip

How to Create a Flask + React Project | Python Backend + React Frontend

A

Arpan Neupane

Creator on the Flask channel

Watch on YouTube ↗

610K viewsJun 26, 202110:50 runtime

Learn how to create a full-stack web application by integrating a Python Flask backend with a React frontend. This comprehensive guide walks you through setting up your project structure, from creating a Flask server and a simple API endpoint to initializing a React client…

Chapters

#flask#clip#backend

Project Structure

The project consists of two main directories in the root folder:

flask-server: Contains the Python backend code, including the server.py file and the Python virtual environment.
client: Contains the frontend React application, generated by create-react-app.

Backend Setup (Flask)

Create a Virtual Environment: To isolate project dependencies, a virtual environment is created and activated.
- Mac/Linux: python3 -m venv venv and source venv/bin/activate
- Windows: python -m venv venv and venv\Scripts\activate
Install Flask: pip install flask (or pip3 on Mac) is used to install the Flask framework inside the activated environment.
Build the API: A simple Flask application is created in server.py.
- An app instance is created: app = Flask(__name__).
- A route is defined to handle API requests: @app.route("/members").
- The route function returns a JSON object: return {"members": ["member one", "member two"]}.
- The application is made runnable with app.run(debug=True). By default, it runs on localhost:5000.

Frontend Setup (React)

Create React App: The frontend is initialized with npx create-react-app client.
Configure Proxy: To simplify API calls from the frontend to the backend during development, a proxy is set up.

Important
In the client/package.json file, add the following line to tell React to forward API requests to the Flask server: "proxy": "http://localhost:5000"

Connecting Frontend to Backend

The core logic for fetching and displaying data is in the client/src/App.js component.

State Management: The useState hook is used to create a state variable to hold the data fetched from the backend.
- const [data, setData] = useState([{}]);
Data Fetching: The useEffect hook is used to perform a side effect—fetching data from the API—when the component first renders.
- The fetch() API is called on the relative path /members (thanks to the proxy).
- The response is converted to JSON, and the setData function is used to update the component's state.

Tip
An empty dependency array [] is passed to useEffect to ensure the fetch operation only runs once, mimicking the behavior of componentDidMount. useEffect(() => { ... }, [])

Conditional Rendering: The component's return statement checks if the data has been loaded.
- If the data is not yet available, a "Loading..." message is displayed.
- Once the data is fetched, the .map() function is used to iterate over the array of members and render each one in a <p> tag.

Initial Project & Backend Directory Setup

Hey guys, welcome back. In this video, I'll be showing you guys how to set up a project with a Flask back-end and a React front-end. We'll be setting up a Flask back-end API and connect the back-end to the front end.

All right, so first of all, I have opened VS Code inside of this empty folder called react-flask-video and this is the folder that will contain all the code. It'll contain the front end which is in React and the back end which is written in Python.

So first to set this up I'm just going to create a folder called flask-server using the terminal. So I'm just going to open up my terminal and then type in mkdir flask-server. And this is the folder that will contain our Python file which will be the backend.

So next i'm just going to cd into it, so I'll just do cd flask-server and then do touch server.py. So I'm basically going to create an empty file called server.py and this will be our backend file.

Creating the React Frontend Application

Now that we have our backend folders and files done, I'm going to create the frontend. So to do this, I'll just open up another terminal and then create a React app with npx create-react-app. So I'll do npx create-react-app client, and this will be our client. And this will take a while, so I'll just speed up the video.

All right, so now our client has been created and now we can move on to installing packages in our backend and configuring a few things.

Setting Up the Python Virtual Environment

So to configure a few things in our backend and install packages, we're going to first create a virtual environment. So I'll just do python3 -m venv and then the path to our environment. So I'll just put venv for this field since it'll get created in this flask-server directory. And for Windows, it'll be a little bit different, so I'll put the commands on the screen for it.

Then to activate it, you can just do source venv/bin/activate for Mac. If you're on Windows, I'll put the command on the screen. Now that the virtual environment has been created and is activated, we'll just need to install Flask. So to install Flask, you'll just do pip3 install flask if you're on Mac. And if you're on Windows, you're just going to do pip install flask.

It'll take a few seconds to install and once it's finished installing we're ready to write some code in this server.py file to set up our backend. And once we're done with the backend, we will move on to setting up the front end.

Building the Flask API Endpoint

Okay, so to set up our Python backend API, I'm just going to first set up a normal Flask app. And in the app, we're going to have a route called /members and this route will basically return a JSON array of members. Then once we set this up, we'll connect the front end to the backend and then get that JSON array of members from the back end, and then we'll display that array onto the screen.

So first to set up our backend, I'm just going to import Flask by doing from flask import Flask. Then we're going to need to create the app instance, so I'll just do app = Flask(__name__). Then we're going to need to create a route for the members. So I'll just do Members API route, and I'll do @app.route('/members'), and then def members():. And I'm just going to return a JSON array, so I'll just do return {"members": ["member one", "member two", "member three"]}.

Okay, then we're going to need a way to run our app, so I will just do if __name__ == "__main__": app.run(debug=True). And I'm putting debug=True since we're in development mode.

Now, if we run our app using python3 server.py... if you're on Windows you can do python server.py. And once we run the app, it will be running on localhost port 5000 by default. So if we go to our browser and type in localhost:5000, and then if we go to /members, we're going to see this over here. So if I just do /members, you can see that we have the JSON data displayed on the screen. And our backend API has been built. Now we can start working on the front end.

Cleaning Up and Configuring the React Proxy

So to begin setting up the front end, I'm just going to first start off by removing some unnecessary files. So I will remove App.test.js, index.css, logo.svg. And I'll remove this import line for index.css inside of index.js.

And now we're ready to configure the frontend. Now to configure the front end, we're going to need to go to our package.json file. And this file is used to list all the packages installed in our front end as well as keep track of data associated with our front end. And what we're going to do is configure the proxy in this file to connect the front end to the back end. So what I'll do is just insert this line called "proxy" and then this will be equal to our back end. So I'm just going to put http://localhost:5000.

And we're putting port 5000 since our back end is running on port 5000. And this proxy is just here so that we can tell React which port our backend is running on and so that we can make a relative request instead of having to type the full URL. And now that we've written this proxy, we can move on to the next step.

Initializing the React App Component

So what we need to do next is we need to go to our App.js file and remove all the starter code here. And then I'll do the rfce shortcut to get some code set up for a functional component. And then we're going to import useState and useEffect, and I'll explain what these are used for.

So useState will be used to create a state variable which will contain the data retrieved from the back end. And the same state variable will be used to render the data on the page. And then this useEffect will be used to fetch the backend API on the first render. If you don't know how these work, I'd recommend checking my videos on them, and those videos are on the top right of the screen on the cards.

But if you do know how they work, let's start. First, we're going to start up our front end and to do that we need to go to this terminal and type cd client to cd into this client directory that contains our front end code. Then we're going to do npm start to start up our front end. And if we go to our browser, it'll automatically open up a new tab on localhost:3000 right here as you can see. And on this page, we have nothing here. And the reason we have nothing here is because we don't have anything written in the code.

So what we're going to do is first create a state variable, then fetch this backend API, and whatever the response the backend gives, which is going to be this JSON data, we'll set the state variable to this JSON data and use that same state variable to render that data onto this front-end page.

Fetching Data with `useState` and `useEffect`

Now we just need to create the state variable. And to do that, we'll just go to our code and type in const [data, setData] = useState([{}]).

data is the actual variable and the setData is the function we can use to manipulate the state of this data variable. So the initial state is this right here, but once we fetch the back end, the state of this data variable will change to the data that we get from the back end. Okay so now that we have created the state variable, we can start using useEffect to fetch the backend API. So I'll write some code down and I'll explain to you guys once I'm done, since it'll be easier to understand.

All right, so what we're doing is this: we're using useEffect to fetch this /members route in this back end over here, right here. And whatever response that the members route gives us, which is going to be this JSON array that you see right here, we're going to put that response into JSON. And whatever data is inside of that JSON we're going to set that data into this data variable using the setData function. And to make sure that our API fetching worked we're going to be console.logging the data to see if we actually retrieved it or not. And I just passed in this empty array at the end of this useEffect block just so that this only runs once.

Rendering API Data in React

Okay, so now that we have written the code to fetch the API, we just need to check if it's working. So in our code, I put this console.log(data) right here to see if we actually retrieved it from the backend. So if we go to our web page and then refresh the webpage and open up our console, you can see that we have retrieved the members from the back end. And this basically means that we've successfully fetched this back-end API. And all we need to do next is display these members onto the webpage right here.

All right so to display onto the web page it's also fairly simple to do. So I'm going to first write down the code and I'll explain afterwards.

Okay so I've saved my changes and if we go to the web page, you can see that we have the members from the back end displayed onto the front end, meaning that our app is working perfectly. It's fetching the members from the back end and displaying them, which is the whole purpose.

But you may be wondering how it's displayed. So if I go back to my code, what we're basically doing is checking if the members array is equal to undefined or not. And if it is equal to undefined, that means the API is being fetched and we don't have the members yet, so we just display "Loading...". Otherwise, meaning that the API has been fetched, we'll map every member inside the members array to a <p> tag to display the members one by one like this.

Recap and Next Steps

Alright guys, that's pretty much it for this video. This video is made mainly to show you how to set up a project with a Flask back end and a React front end. And to just recap what we did, we basically set up this backend API with Flask with these members here, and in the front end we just fetched this backend API and displayed those members.

Now of course I'd encourage you guys to do more with this. For example, if you wanted to make a to-do list app, you can send requests with Axios and React to the backend to save to-do's and display them by building a backend API like this. And yeah, so that's pretty much it for this video. And if you enjoyed or learned something new, make sure to leave a like and subscribe for more videos like this. With that being said, have a nice day.