DEV Community

Cover image for How to create React App with Flask backend?
Divyajyoti Ukirde
Divyajyoti Ukirde

Posted on • Originally published at

How to create React App with Flask backend?

Do you want use Python as backend for your React project? You can write the frontend logic in Javascript and use Python for the backend. Flask makes this integration into one single project really easy.

We'll be covering,

  • Creating Flask API
  • Creating React App
  • Integration

Creating Flask API

First we start by creating a Flask project. I would recommend to make a separate folder to run the backend server code.

$ mkdir flask-api
$ cd flask-api

I always setup a virtual environment. A virtual environment manages dependencies of the project and remain particular for the single project. It does not affect the system packages. The following commands are for Unix-based systems. They create virtual environment and activates it.

$ python3 -m venv venv
$ source venv/bin/activate
(venv) $ 

Python versions <3.4 do not have virtual environments inbuilt. You need to install a third-party package virtualenv and run virtualenv venv

Now you start installing flask and python's dotenv package. And flask-cors for handling Cross Origin Resource Sharing for making cross-origin http calls.

(venv) $ pip install flask python-dotenv
(venv) $ pip install -U flask-cors

Create a file in the flask-api directory and initialise the flask environment.

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)

The next step is to create a .env file which contains the following data.

Flask automatically imports the project from the FLASK_APP environment variable. And reads the environment from FLASK_ENV variable.

Let's start with writing a simple API that responds with "Hello World". In recent versions, Flask supports returning dictionary rather than calling jsonify() as Flask implicitly JSONifies the dictionary.

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)

def say_hello_world():
    return {'result': "Hello World"}

Start the Flask server using flask run. You should see something like this:

* Serving Flask app "" (lazy loading)
* Environment: development
* Debug mode: on
* Running on (Press CTRL+C to quit)
* Restarting with fsevents reloader
* Debugger is active!
* Debugger PIN: 306-333-596

Creating React App

$ npx create-react-app react-flask-app
$ cd react-flask-app

In package.json, add this particular line. It tells the development server to proxy the request to API server.

"proxy": "http://localhost:5000"


In React's App.js file

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [placeholder, setPlaceholder] = useState('Hi');

  useEffect(() => {
    fetch('/hello').then(res => res.json()).then(data => {
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
          Edit <code>src/App.js</code> and save to reload.
          rel="noopener noreferrer"
          Learn React
        <p>Flask says {placeholder}</p>

export default App;

Screenshot 2020-09-27 at 8.04.04 PM.png

Hurrah! We did it! It automatically makes a request to Flask backend and updates the DOM. There is no language barrier for client server communication.

Top comments (3)

rramesh2000 profile image
Ritesh Ramesh

Nice article. How do you deploy this to production servers?

finna profile image
Alex Finn

Great article! got me up and running, appreciate it

andrewbaisden profile image
Andrew Baisden

Nice Flask is so easy to learn its very similar to using Node/Express. However I think many developers still prefer a React/Node stack to a React/Flask one its more popular.