Starter repo for getting up-and-running with React, Flask, webpack, and Babel.
A quick starter repo that includes Flask and React, with Babel and Webpack. For proof-of-concept projects, workshop settings, etc where you don't want to worry about developer setup or writing config files.
TLDR; for the quick and dirty setup, install your dependencies:
pip install virtualenv virtualenv venv; source venv/bin/activate pip install -r requirements.txt npm install -g webpack; npm install
Then in two separate tabs run
python app.pyand
webpack --watch. Make edits to
js/Hello.jsand
app.pyto edit the frontend and backend, respectively.
These steps are explained in more detail below.
You'll need some package managers.
npm
pip
For the backend:
virtualenv venv source venv/bin/activate pip install -r requirements.txt
For the frontend:
If you don't have webpack, install it:
npm install -g webpack
Then, use
npmto install the remaining JavaScript dependencies.
npm install
The entry point for the app is in
js/app.js. The starter React component is
js/Hello.js. Editing this file is a good place to start.
While developing on the frontend, run
webpack --watchto keep re-compiling your JavaScript code.
Running
webpackcreates a file in
static/bundle.js, which is the bundled version of your frontend code.
The "backend" here is a bare-bones Flask app. Look in
app.pyif you want to make edits to the backend.
To run the application, follow the steps in the next section.
If you're using a virtualenv, activate it.
source venv/bin/activate
Then run the Flask app:
python app.py