Serve React JS application from a Flask application.
Project description
Project description
flask-reactize is a boostrap to serve any React JS 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.
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
)
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 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
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.