Starter repo for getting up-and-running with React, Flask, webpack, and Babel.
Available items
No Items, yet!
The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:
React + Flask starter kit
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.
Prerequisites
You'll need some package managers.
npm
pip
Setup
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
Development
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.
Running the app
If you're using a virtualenv, activate it.
source venv/bin/activate
Then run the Flask app:
python app.py