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
Flask Multiple Database Login

Flask Multiple Database Login Handle login with flask using two diferent databases: UE | European; BR | Brazilian; These databases are separed to resp

Jose Pedro 1 Dec 16, 2021
docker-compose uWSGI nginx flask

docker-compose uWSGI nginx flask Note that this was tested on CentOS 7 Usage sudo yum install docker

Abdolkarim Saeedi 3 Sep 11, 2022
Flask + marshmallow for beautiful APIs

Flask-Marshmallow Flask + marshmallow for beautiful APIs Flask-Marshmallow is a thin integration layer for Flask (a Python web framework) and marshmal

marshmallow-code 770 Jan 05, 2023
A solid foundation for your flask app

Flask Foundation There is a cookiecutter version of this repo at https://github.com/JackStouffer/cookiecutter-Flask-Foundation. Documentation is locat

Jack Stouffer 1.3k Dec 11, 2022
Lightweight library for providing filtering mechanism for your APIs using SQLAlchemy

sqlalchemy-filters-plus is a light-weight extendable library for filtering queries with sqlalchemy. Install pip install sqlalchemy-fitlers-plus Usage

Karami El Mehdi 38 Oct 05, 2022
A Flask app template with integrated SQLAlchemy, authentication, and Bootstrap frontend

Flask-Bootstrap Flask-Bootstrap is an Flask app template for users to clone and customize as desired, as opposed to a Flask extension that you can ins

Eric S. Bullington 204 Dec 26, 2022
Flask app for deploying DigitalOcean droplet using Pulumi.

Droplet Deployer Simple Flask app which deploys a droplet onto Digital ocean. Behind the scenes there's Pulumi being used. Background I have been Terr

Ahmed Sajid 1 Oct 30, 2021
Flask 文档中文翻译

Flask 中文文档 这里是 Flask 文档中文翻译项目,欢迎参与! 在开始翻译之前,请务必阅读下面的 Contributing Guide 了解贡献流程,然后阅读这个 Issue 了解翻译要求,在这个 Discussion 投票选出你认为合适的翻译词汇,在这个 Discussion 投票选出你喜

Grey Li 93 Nov 28, 2022
An flask app for fake image detector

fake_img_detector This is a ml based project: frameworks used:- Flask Google collab #Description: Here you can Upload two different looking image with

shivam kumar 7 Jun 29, 2022
Curso Desenvolvimento avançado Python com Flask e REST API

Curso Desenvolvimento avançado Python com Flask e REST API Curso da Digital Innovation One Professor: Rafael Galleani Conteudo do curso Introdução ao

Elizeu Barbosa Abreu 1 Nov 14, 2021
Glauth management ui created with python/flask

glauth-ui Glauth-UI is a small flask web app i created to manage the minimal glauth ldap server. I created this as i wanted to use glauth for authenti

Nils Thiele 67 Nov 29, 2022
SqlAlchemy Flask-Restful Swagger Json:API OpenAPI

SAFRS: Python OpenAPI & JSON:API Framework Overview Installation JSON:API Interface Resource Objects Relationships Methods Custom Methods Class Method

Thomas Pollet 365 Jan 06, 2023
Python3🐍 webApp to display your current playing music on OBS Studio.

Spotify Overlay A Overlay to display on Obs Studio or any related video/stream recorder, the current music that is playing on your Spotify. Installati

carlitos 0 Oct 17, 2022
Browsable web APIs for Flask.

Flask API Browsable web APIs for Flask. Status: This project is in maintenance mode. The original author (Tom Christie) has shifted his focus to API S

Flask API 1.3k Jan 05, 2023
Getting Started with Docker and Flask

Getting-Started-with-Docker-and-Flask Introduction Docker makes it easier, simpler and safer to build, deploy and manage applications in a docker cont

Phylis Jepchumba 1 Oct 08, 2021
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
A flask extension using pyexcel to read, manipulate and write data in different excel formats: csv, ods, xls, xlsx and xlsm.

Flask-Excel - Let you focus on data, instead of file formats Support the project If your company has embedded pyexcel and its components into a revenu

247 Dec 27, 2022
A simple example using Flask inside a container

This is a simple example of how create a container for a Python Flask Web Application using Docker.

Fazt Web 8 Aug 30, 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
Flask-Discord-Bot-Dashboard - A simple discord Bot dashboard created in Flask Python

Flask-Discord-Bot-Dashboard A simple discord Bot dashboard created in Flask Pyth

Ethan 8 Dec 22, 2022