react-flask

by bonniee

bonniee / react-flask

Starter repo for getting up-and-running with React, Flask, webpack, and Babel.

202 Stars 53 Forks Last release: Not found 10 Commits 0 Releases

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.py
and
webpack --watch
. Make edits to
js/Hello.js
and
app.py
to 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

npm
to 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 --watch
to keep re-compiling your JavaScript code.

Running

webpack
creates 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.py
if 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.