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 ofApp.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.