flask-reactize

Purpose

Developing a ReactJS application requires to use nodejs as back end server. What if you want to consume external APIs: how are you going to handle cross origin calls? What if you want to secure your application and APIs easily?

In modern days, as we are now, React JS offers many nice functionalities to develop an application easily, from any IDE.

In development mode, React JS requires NodeJS as a back end server. NodeJS maintains a connection between your development environment and your browser where the application is loaded so that:

• it refreshes automatically when an update is made,
• it sends in real time any error, warning that may have, in both the console and the developers toolbar of your browser of choice.

For production, you can compile your React JS application into static assets - you can then use any technology to serve those static files.

However, if your React JS calls external APIs (whether there are customs, or public) you will face security issues.

In addition, if your APIs require to be logged in, this is not going to be easy to implement.

What does flask-reactize do?

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 (Although not recommended for production), Uvicorn, Gunicorn etc.

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

Features list

• It has a development mode: a nodejs server is transparently started by the Python back-end,
• It supports production mode: this back-end can also serve your static assets,
• It supports hot reload while developing: changing the Python code or the React code will trigger a browser refresh,
• It supports proxying multiple APIs via a specific route name.

What you will find in this repo

• Under src/flask-reactize you will find the Python module (also available via PyPi). More info
• Under sample/ you will find a simple demo site built with React JS using flask-reactize. More info on how to use it.
• Two DockerFile for Python 3.8 and Python 3.10. To run them,

Sample site: the short way using Docker

You want to try out quickly flask-reactize, follow the steps below:

1. Ensure you have vscode installed because you are going to use DevContainers to have all prerequisites without any hassle. It is free and great!
2. Once vscode is installed, install the extension Remote Development.
3. Install docker if you do not already have it.

You are now ready!

In your favorite terminal (on Windows, WSL) run the following commands:

# Clone the project
/> cd "wherever you want to work"
/> git clone https://github.com/jchomarat/flask-reactize
/> cd flask-reactize

# Open vscode
/> code .

Once in vscode, open the Palette (Ctrl+Shift+P / Cmd+Shift+P) and select the action Remote-Containers: Reopen in container. You can now grab a coffee while the container builds.

When the container is built, your vscode is fully operational. If you open the terminal built in vscode, you will be prompted directly inside the container, as a "dummy" user called alex.

You can now build the flask-reactize image. In the terminal (the one in vscode), run the following commands:

/> make docker-build-sample-py38 # for python 3.8
# or
/> make docker-build-sample-py310 # for python 3.10
# 'make' allows to call bash scripts/commands easily via actions

# When the command above has executed, run
/> make docker-run-sample

If running the commands above result in an access is denied for the file /var/run/docker.sock, ensure that your user is the owner of this file. If it is not the case, run

# Assume your dev container's user is alex
/> sudo chown alex:alex /var/run/docker.sock

You can now open your browser and load the url http://localhost:8080

Sample site: the long way

Ok, you want to do everything by yourself, no worries I got you covered!

Please note that you need to be on a *nix system for that, whether you are on Linux, Mac or Windows for WSL

Instructions to follow can be found here!