This is an example project setup that supports combining Flask with React.

Benefits include:

• webpack for asset bundling (providing many benefits)
• flask / webpack integration
• support for front-end development using React
• live reloading of changes in development mode
• [TODO] Docker integration (with support for Docker based deployments)

Based on the Flask-Webpack and Webpack React HMR example.

To run:

• clone the repo
• run docker-compose run webpack-dev npm i to setup your development environment
• run docker-compose up
• visit http://localhost:5000
• edit anything in the render method of App.js and see HMR at work.

NOTE: this example runs within docker, but is configured to mount the host directory (so that standard edits to source files are reflected within the container)

During normal development, docker-compose is used to start both Flask (the primary web server) and the webpack-dev-server which serves the compiled Javascript and handles the hot module reloading on changes.

Since webpack-dev-server is installed and runs within a Docker container, packages should be installed by running inside of the container:

docker-compose run webpack-dev npm i <foo> --save-dev

This is a minimal example, pull requests are always welcome.