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

Overview

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:

git clone https://github.com/jchomarat/flask-reactize /> cd flask-reactize # Open vscode /> code .">
# 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!

You might also like...
A web application made with Flask that works with a weather service API to get the current weather from all over the world.
A web application made with Flask that works with a weather service API to get the current weather from all over the world.

Weather App A web application made with Flask that works with a weather service API to get the current weather from all over the world. Uses data from

A multi-container docker application. Implemented and dockerized a web-based service leveraging Flask

Flask-based-web-service-with-Docker-compose A multi-container docker application. Implemented and dockerized a web-based service leveraging Flask. Des

Flask-Bcrypt is a Flask extension that provides bcrypt hashing utilities for your application.

Flask-Bcrypt Flask-Bcrypt is a Flask extension that provides bcrypt hashing utilities for your application. Due to the recent increased prevelance of

Flask-Bcrypt is a Flask extension that provides bcrypt hashing utilities for your application.

Flask-Bcrypt Flask-Bcrypt is a Flask extension that provides bcrypt hashing utilities for your application. Due to the recent increased prevelance of

The Snoopy boilerplate in flask framework for development enterprise application.

Snoopy What is snoopy! The "Snoopy" boilerplate in flask framework for development enterprise application. Motivation In my 10 years of development ex

flask-apispec MIT flask-apispec (🥉24 · ⭐ 520) - Build and document REST APIs with Flask and apispec. MIT

flask-apispec flask-apispec is a lightweight tool for building REST APIs in Flask. flask-apispec uses webargs for request parsing, marshmallow for res

Flask Web DRY full-stack framework by Problem Fighter

In the name of God, the Most Gracious, the Most Merciful. PF-Flask-Web Documentation Install and update using pip: pip install -U PF-Flask-Web Please

Lux Academy & Data Science East Africa Python Boot Camp, Building and Deploying  Flask Application Using Docker  Demo App.
Lux Academy & Data Science East Africa Python Boot Camp, Building and Deploying Flask Application Using Docker Demo App.

Flask and Docker Application Demo A Docker image is a read-only, inert template that comes with instructions for deploying containers. In Docker, ever

Neo4j Movies Example application with Flask backend using the neo4j-python-driver
Neo4j Movies Example application with Flask backend using the neo4j-python-driver

Neo4j Movies Application: Quick Start This example application demonstrates how easy it is to get started with Neo4j in Python. It is a very simple we

Releases(1.0.0a3)
Owner
Julien Chomarat
Software Engineer at Microsoft, focusing mostly on Azure services
Julien Chomarat
Another redis monitor by using flask, angular, socket.io

RedisPAPA we use redis info to monitor the redis usage. PAPA means a father who is monitoring the redis. accoding to the redis doc, it is be recommand

no13bus 393 Dec 30, 2022
A simple Task todo application built with Flask

Task TODO Table An application built with Flask a Python framework and hosted on Heroku. Important notes GuniCorn (Green Unicorn): is a Python WSGI HT

DCN (Dubem Celestine Nwabuisi) 1 Dec 15, 2021
A service made with Flask and Python to help you find the weather of your favorite cities.

Weather-App A service made with Flask and Python to help you find the weather of your favorite cities. Features Backend using Flask and Jinja Weather

Cauã Rinaldi 1 Nov 17, 2022
Flaskr: Intro to Flask, Test-Driven Development (TDD), and JavaScript

Flaskr - Intro to Flask, Test-Driven Development, and JavaScript Share on Twitter As many of you know, Flaskr -- a mini-blog-like-app -- is the app th

Michael Herman 2.2k Jan 04, 2023
a flask zipkin extension based on py_zipkin.

flask-zipkin a flask zipkin extension based on py_zipkin. Installation pip install flask_zipkin usage you can simply use it as other flask extensions.

39 Jul 03, 2022
A web application for a fake pizza store, built in Python with Flask and PostgreSQL.

✨ Pizza Pizza - Pizza Store ✨ A web application for a fake Pizza Store, the app let you create an account and order pizza, complements or drinks. Buil

Bonnie Fave 6 Dec 18, 2022
MongoEngine flask extension with WTF model forms support

Flask-MongoEngine Info: MongoEngine for Flask web applications. Repository: https://github.com/MongoEngine/flask-mongoengine About Flask-MongoEngine i

MongoEngine 815 Jan 03, 2023
A simple demo of using aiogram + async sqlalchemy 1.4+

aiogram-and-sqlalchemy-demo A simple demo of using aiogram + async sqlalchemy 1.4+ Used tech: aiogram SQLAlchemy 1.4+ PostgreSQL as database asyncpg a

Aleksandr 68 Dec 31, 2022
Criando um Bot com PYAUTOGUI e utilizando o Flask para Interface para Usuário

Criando um Bot com PYAUTOGUI e utilizando o Flask para Interface para Usuário O pyautogui foi escolhido pela possibilidade de fazer a identificação do

Rodrigo Vital 2 Oct 20, 2021
Guitar tabs web app for guitar fans, powered by Python/Flask

Guitar123 version 0.8.5 Guitar tabs web app for guitar fans, powered by Python/Flask Features Guitar tabs search and browse Easy to use for end user a

lowrain 48 Dec 27, 2022
Map Matching & Weight Completion service - Java (Springboot) & Python(Flask)

Map Matching service to match coordinates to roads using Java and Springboot. Weight Completion service to fill in missing weights in a graph, using Python and Flask.

2 May 13, 2022
Neo4j Movies Example application with Flask backend using the neo4j-python-driver

Neo4j Movies Application: Quick Start This example application demonstrates how easy it is to get started with Neo4j in Python. It is a very simple we

Neo4j Examples 309 Dec 24, 2022
Regex Converter for Flask URL Routes

Flask-Reggie Enable Regex Routes within Flask Installation pip install flask-reggie Configuration To enable regex routes within your application from

Rhys Elsmore 48 Mar 07, 2022
A boilerplate Flask API for a Fullstack Project :rocket:

Flask Boilerplate to quickly get started with production grade flask application with some additional packages and configuration prebuilt.

Yasser Tahiri 32 Dec 24, 2022
Full text search for flask.

flask-msearch Installation To install flask-msearch: pip install flask-msearch # when MSEARCH_BACKEND = "whoosh" pip install whoosh blinker # when MSE

honmaple 197 Dec 29, 2022
Example Flask application illustrating some of my common practices

Overholt Overholt is an example Flask application illustrating some of my common practices Development Environment At the bare minimum you'll need the

Matt Wright 1.6k Dec 15, 2022
Track requests to your Flask website with Matomo

Flask-Matomo Flask-Matomo is a library which lets you track the requests of your Flask website using Matomo (Piwik). Installation pip install flask-ma

Lucas Hild 13 Jul 14, 2022
Flask-Diamond is a batteries-included Flask framework.

Flask-Diamond Flask-Diamond is a batteries-included Python Flask framework, sortof like Django but radically decomposable. Flask-Diamond offers some o

Diamond Methods 173 Dec 22, 2022
Mixer -- Is a fixtures replacement. Supported Django, Flask, SqlAlchemy and custom python objects.

The Mixer is a helper to generate instances of Django or SQLAlchemy models. It's useful for testing and fixture replacement. Fast and convenient test-

Kirill Klenov 870 Jan 08, 2023
Small and simple gravatar usage in Flask.

Flask Gravatar About This is small and simple integration gravatar into flask. Installation Flask-Gravatar is on PyPI so all you need is: pip install

Alexander Zelenyak 78 Sep 15, 2022