flask-reactize 1.0.0a3

Serve React JS application from a Flask application.

Project description

flask-reactize is a boostrap to serve any React JS application via a Python back-end, using Flask as web framework.

Your back-end web server can be anything: Flask itself (not recommended though for production), Uvicorn, Gunicorn etc.

In a nutshell, flask-reactize is a proxy for your React JS application and for your APIs.

Installation

To install with pip:

/> python -m pip install flask-reactize

Usage

In order to use flask-reactize, you first need to have a React JS application.

Follow the steps below to setup a sample demo site and activate flask-reactize to serve both the development application (via an underlying nodejs server) and the production application (compiled in static):

# Ensure you have nodejs and Python 3.8/3.10 on your environment
# Create a React JS application
/> npx create-react-app demo-app

# Create the python bootstrap to serve this created app
/> python -m pip install flask-reactize
/> vi main.py

Paste the following snippet into your main.py file:

import os
from flask import Flask
from flask_reactize import FlaskReactize

app = Flask(__name__)

FlaskReactize(app).serve_react_app(
        os.path.join(os.path.dirname(__file__), "demo-app")
    )

Save your file and start your Flask server:

/> FLASK_APP=main flask run -p 8080 # Or whatever port you want to use

Open your browser and navigate to http://localhost:8080

If you want to try the compiled version of the React JS application, run the following:

# Compile the react app
/> cd demo-app
/> npm run build

# Once the compilation is done, create a new python file
/> cd ../ && vi main_static.py

Paste the following snippet into your main_static.py file:

import os
from flask import Flask
from flask_reactize import FlaskReactize

app = Flask(__name__)

FlaskReactize(app).serve_static(
        static_folder=os.path.join(os.path.dirname(__file__), "demo-app/build")
    )

Save your file and start your Flask server:

/> FLASK_APP=main_static flask run -p 8080 # Or whatever port you want to use

Open your browser and navigate to http://localhost:8080

More samples

If you want more samples, with both not compiled and compiled React JS served by the same file, or if you want to see the API proxy in action, navigate there and clone the project to either use the sample site or one of the dockerFile available.

API

flask-reactize API is very minimaliste, you have two methods available to call.

To serve static files, use:

from flask import Flask
from flask_reactize import FlaskReactize

app = Flask(__name__)

FlaskReactize(app).serve_static(
        static_folder="Folder where the static assets are",
        proxy_api="Dictionary with proxied routes
    )

To serve the application in developer mode, use:

from flask import Flask
from flask_reactize import FlaskReactize

app = Flask(__name__)

FlaskReactize(app).serve_react_app(
        source_react_folder="Folder where the react sources are",
        port="Port number to start the React app on. Optional, default 3005",
        proxy_api="Dictionary with proxied routes
    )

Each method can take a dict called proxy_api in order to route API calls from the React JS to the remote endpoint to avoid security issue.

Let's say your remote endpoint is http://some-api/api where, for instance, you get a users list. Your endpoint in your code would be http://some-api/api/users.

To proxy that endpoint you'll need to create a dict and pass it to one of the method of the FlaskReactize you are using:

from flask import Flask
from flask_reactize import FlaskReactize

app = Flask(__name__)

proxy_api = {
    "/someApi": "http://some-api/api"
}

FlaskReactize(app).serve_react_app(
        source_react_folder="Folder where the react sources are",
        port="Port number to start the React app on. Optional, default 3005",
        proxy_api="Dictionary with proxied routes
    )

Then, in your React code (client code) you can call the following endoint

onst usersListEndpoint = "/someApi/users";

const getUsers = async () => {

  return await fetch(usersListEndpoint, {
      method: "GET",
      headers:  {
          'Content-Type': 'application/json'
      }
    })
};

/someApi/users will be processed by the Python application, replaced with http://some-api/api/users and called. The output of the remote endpoint will be sent as it is to the client.

More info and sample code can be found on Github.