React and Flask for Side Projects
November 25th, 2018
What I love about Flask is the same thing I love about Python: expressiveness. I felt the same kind of joy writing my first line of Python:
print 'Hello, World'
as writing my first Flask app:
from flask import Flask app = Flask(__name__) @app.route('/') def hello(): return 'Hello, World'
Here’s the experience I’ve wanted to have:
The most obvious choice is create-react-app, but it was very unclear how user/session management would work, unless I planned on having a Node backend.
This then plays into the reason I use Python and specifically, Flask. It’s obvious both Python and Flask have very real limitations, but with my side projects, my greatest priority is expressiveness. I think in Python, and I don’t think that’s going to change anytime soon.
Another undesirable effect of create-react-app is…I’m suddenly building two apps: a API backend and a JS frontend. While de-coupling these two might be the “right” pattern for companies, it’s a huge pain for side projects.
I like React components, but I don’t want to start off with single page apps. 80% of my pages only need HTML/CSS, so I’d prefer to selectively add React components and over time, have a library of components that if I want to later migrate to a SPA, it’d be pretty easy.
Finding my Lego
I finally landed on Parcel. Here’s my blueprint.
static/ ∟ src/ ∟ index.js ∟ helloMessage.jsx ∟ index.scss templates/ ∟ index.html .babelrc Pipfile app.py package.json
Note: I’m using
pipenv for managing my Python environment, so the Pipfile details the dependencies.
index.html points to
/static/dist/index.js, which imports other components. This means if more than one page requires React components, say
login.html, you just need to create
/static/src/login.js, and link to it in the template.
To start up the development environment:
pipenv run flask run
npm run watch
I use dokku
In the post-deploy config,
npm run build
pipenv lock -r > requirements.txt
Tada! This is my first pass, so hopefully, I’ll be contining to update the repo as I learn more.