DEV Community

Cover image for Structure a Flask React Monorepo
Warren Wong
Warren Wong

Posted on • Originally published at warrenwong.org on

Structure a Flask React Monorepo

This is my project structure for a Flask server and React client residing in the same git repository. It's fairly similar to the many NodeJS, React monorepos out there where the server code will be in the server subdirectory and the client code will reside in the client subdirectory.

First, let's start by creating the project directory and intialize the git repository:

mkdir flask-react-monorepo
cd flask-react-monorepo
git init
Enter fullscreen mode Exit fullscreen mode

Let's create a virtual environment for the repo with venv and place it in the venv directory inside the project. We will want to add this to our .gitignore file also. Once we have our virtual environment set up, we'll need to let our system know to use it.

python -m venv venv
echo venv/ > .gitignore
source venv/bin/activate
Enter fullscreen mode Exit fullscreen mode

Let's install our dependencies, first for Python, then keep a list of the dependencies in a file called requirements.txt.

pip install Flask
pip freeze > requirements.txt
Enter fullscreen mode Exit fullscreen mode

requirements.txt (your versions may vary)

Click==7.0
Flask==1.0.3
itsdangerous==1.1.0
Jinja2==2.10.1
MarkupSafe==1.1.1
Werkzeug==0.15.4
Enter fullscreen mode Exit fullscreen mode

The canonical way to structure flask apps have a Python package named whatever the actual app is supposed to be within a subdirectory. Check out the Flask tutorial here for more details.

For now, let's call the Flask server server. It can easily be api or something else you prefer.

mkdir server
Enter fullscreen mode Exit fullscreen mode

For our Flask setup to work, we will need to create a file named setup.py in the root of our project directory:

setup.py

from setuptools import setup

setup(
    name='server',
    packages=['server'],
    include_package_data=True,
    install_requires=['flask']
)
Enter fullscreen mode Exit fullscreen mode

Now, let's just set up a simple Flask app in the server Python package by having an __init__.py file in our server directory.

server/ __init__.py

from flask import Flask

app = Flask( __name__ )

@app.route('/')
def index():
    return 'Hello, World!'
Enter fullscreen mode Exit fullscreen mode

Now comes for the fun part of integrating our JavaScript client. I'll simply use create-react-app for this, but you can pretty much replace this with any front end framework or CLI tools you like.

From the project root:

create-react-app client
Enter fullscreen mode Exit fullscreen mode

Now, we can go and type FLASK_APP=server flask run from the project root to run our development server and, from another terminal, run yarn start from the client directory to run the development client, but that's just 1 too many steps for me.

To streamline the development process, I'll also use yarn in the project root and install the concurrently package.

From the root directory:

yarn init
yarn add -D concurrently
echo node_modules/ >> .gitignore
Enter fullscreen mode Exit fullscreen mode

Now, let's add some scripts to the package.json file yarn init generated. I want yarn client to run the client development server and yarn server to run the backend development server. I also want to call yarn start from the root to run both concurrently.

{
  "name": "flask-react-monorepo",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Warren Wong <me@warrenwong.org>",
  "license": "MIT",
  "devDependencies": {
    "concurrently": "^4.1.0"
  },
  "scripts": {
    "start": "concurrently \"yarn client\" \"yarn server\"",
    "client": "cd client && yarn start",
    "server": "FLASK_APP=server flask run"
  }
}
Enter fullscreen mode Exit fullscreen mode

If everything works out, your back end will be on port 5000 and your client will be on port 3000 by default.

Discussion (0)