ByteSize: Setting up with Flask + React Boilerplate
A Template for Zero to Hello World in 5 minutes.
I use Flask and React. A lot.
As I reference setting up an application with them for most of my tutorials, I figured it would be worthwhile to put together a quick instructional for how to get up and running instead of repeating it each time (DRY and all that).
Getting started with React when you’re using Flask can seem a little daunting at first. Between two different package mangers (pip and npm), some customization needed for properly project layout, and a lack of consistent guides, it rarely seems all that straightforward.
I personally use Webpack for my projects, as I find that you don’t have to make as many changes as you do with create-react-app to get setup. If you were interested in learning how to set up with CRA though, Miguel Grinberg has a great tutorial here.
If you were just looking for the code, you can find the repo here
First Steps
We start off by creating our Flask project. If you’re using Pycharm like myself, it’s as simple as specifying Flask in the New Project creation screen.
If you’re going from scratch though, you will have to create a new directory for the app and activate a virtual environment (venv). If you need help setting up your virtual environment, be sure to check out the guide here.
Once your venv setup and activated, install Flask in the command line.
pip install flask
Flask Backend
Next, we will create an application.py file to hold our create_app function (in application.py)
As well as a config.py file in order to hold our application configuration variables. This file will contain subclasses of Config for different deployments such as Development, Testing and Production (in config.py)
Once we’re finished we’ll create a blank .env file and a .gitignore file to make sure that your version control will ignore the .env file during commits.
To make sure we can read the environment variables in our .env file, we’ll have to install a python package, the aptly named python-dotenv.
pip install python-dotenv
Now we will create an app directory which will hold the logic of our application, along with an init file (in app/__init__.py)
In the create_app function, we alter the defaults for our static_folder and template_folder arguments so that they point towards the output of our eventual React Webpack bundle and the other static assets.
We also import a blueprint for our main application endpoints, which we’ll create now.
Make a new subdirectory within app named “main”, along with its own init file (in app/main/__init__.py)
Next is creating the index endpoint that serves the HTML page referencing our React application (in app/main/views.py)
Front End
With that our Flask application is finished!
The only thing left is to create our React app. Start off by creating a static folder in app, and navigating there in the command line.
cd app/static
Once in the static folder, initialize your project with npm.
npm init
Feel free to use whatever names and configurations you like during the setup process. Once it’s finished a package.json will be generated based on your input. To save some time installing individual packages, you can copy the dependencies, devDependencies and scripts so we can install them all in one go shortly.
Now we will configure Webpack (in app/static/webpack.config.js). This will take all of our files in the src directory (which we will get to shortly), and compile them into a single generated bundle.js file that is created in the dist directory (as we referenced in our create_app function). Don’t worry about creating the dist directory yourself, Webpack will create it for you.
To make sure that we can interpret JSX, we’ll need a babel file (in app/static/.babelrc)
Now that all of our config files are set up, install them with npm
npm install
Final Steps
With our Flask and React configurations set up, we just need to create our React file to return.
We’ll need the index HTML file in a templates subdirectory first (in app/static/templates/index.html)
And finally, create an index.jsx file (in app/static/src/index.jsx)
Finishing Touches
With that we’re done!
You run your react application from the command line while in the static directory with
npm run watch
And the Flask application in a separate command line instance by navigating to the Flask project root directory, setting your Flask application with
set FLASK_APP=application.py
and run it with
flask run
Done!
Thank you for taking the time to read through, and be sure to follow and check out my other tutorials if you want to learn more about creating beautiful components and projects with Flask and React!
