Flask-React-App-Template

A starter template repository to build an app with backend Python-Flask and frontend ReactJs

Package Installions

$ sudo apt install npm

Create a React app

$ npx create-react-app <app-name>

Install Python Dependencies

Install dependency packages

$ sudo apt install python3-pip
$ pip install -r requirements.txt

Build a template backend

$ mkdir api && cd api/ && touch app.py

Flask app (app/api/app.py)

from flask import Flask

app = Flask(__name__)

@app.route('/template-route', methods=['GET'])
def template_route():
    """
    A template route for the flask backend
    """
    return {'context': "Test template!"}

Set up "proxy" redirection from React to Flask

Add the following line to the bottom of the package.json file

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

Flask development server runs on port 5000 by default. In most cases frontend and backend are all served via the same port for seamless integration and avoid cross-origin issues. The React app can be configured to redirect any requests that it receives (on port 3000) to another server.

Start the development server

$ npm start && cd api/ && flask run