ondiekelijah / Connecting-React-Frontend-to-a-Flask-Backend

Connecting a React frontend to a Flask backend, then performing a fetch from the Flask backend.

Requirements ,Usage and Installation

Backend - Flask

Installation

1 .Clone the git repo and create an environment

Depending on your operating system,make a virtual environment to avoid messing with your machine's primary dependencies

Windows

git clone https://github.com/Dev-Elie/Connecting-React-Frontend-to-a-Flask-Backend.git
cd Connecting-React-Frontend-to-a-Flask-Backend/backend
py -3 -m venv venv

macOS/Linux

git clone https://github.com/Dev-Elie/Connecting-React-Frontend-to-a-Flask-Backend.git
cd Connecting-React-Frontend-to-a-Flask-Backend/backend
python3 -m venv venv

2 .Activate the environment

Windows

venv\Scripts\activate

macOS/Linux

. venv/bin/activate or source venv/bin/activate

3 .Install the requirements

Applies for windows/macOS/Linux

pip install -r requirements.txt

4 .Migrate/Create a database - Optional during initial set up

Applies for windows/macOS/Linux

python manage.py

5. Run the application

For linux and macOS Make the run file executable by running the code

chmod 777 run

Then start the application by executing the run file

./run

On windows

set FLASK_APP=routes
flask run

OR python routes.py

Frontend - React

Installation

You just need to install the packages listed on package.json, on the frontend folder.

cd Connecting-React-Frontend-to-a-Flask-Backend/frontend
npm install

npm start

Updating pip packages

In an active virtual environment install updates using the command:

pip list --outdated --format=freeze | grep -v '^\-e' | cut -d = -f 1 | xargs -n1 pip install -U

Update the reqirements.txt file.

pip freeze > requirements.txt

Follow me on Twitter