Python flask react js tutorial

Easy-to-Follow Tutorials

A simple and concise guide

I managed to find various tutorials online when I was trying to figure out how to build and then deploy my React + Flask App. What I did was, I first Googled and figured out how to build the React+Flask App, then I tried searching around for how to deploy it.

Unfortunately, most tutorials I managed to find were TOO complicated (personal opinion). If you Google “How to build a React Flask App”, here’s my top three results: link, link, link.

They might be great tutorials but if you don’t wanna bother with Nginx, various configurations and extra packages for now (and you JUST wanna return something from Flask to React and then see it deployed onlinefor a start), you might wanna give this tutorial a try.

It’s divided into three parts — Back-end (Flask), Front-end (React), and lastly Deployment on Heroku. Here’s the GitHub repo — https://github.com/Reine0017/reactFlaskTutorial.

Let’s get started! ʕ•́ᴥ•̀ʔっ

Part 1 —Back-end (Flask)

According to your own requirements, you might need to install the necessary python packages beforehand. I used pip to install all the packages that I need and did not use a virtual environment (even though that’s highly recommended). To create a new python virtual environment called venv (you can call this something else — just replace the last venv in the command below with your own venv name), run:

python -m venv venv

To activate venv:

source venv/bin/activate

We’ll start by working on the back-end flask set up first. There are many ways you can structure your project but to deploy on Heroku later, the Procfile must be exposed in the root directory (more on the Procfile later). In your root directory, create a file called app.py.

This is the thing that runs when we run flask run. I named mine app.py but you can choose to name it anything else other than flask.py because this would conflict with Flask itself.

In line 6, we created an instance of the Flask class. With reference to the official Flask documentation, you’ll notice that in my example there are two more arguments (static_url_path and static_folder). The static_url_path can be used to specify a different path for the static files on the web and it defaults to the name of the static_folder folder. The static_folder points to the build directory of our react project (because I named my sub-directory frontend, it’s frontend/build in my case — change this accordingly).

Lines 10–12: the @app.route decorator tells Flask which URL should trigger our serve(path) function. Lastly, send_from_directory allows us to send our “index.html” file from our “frontend/build” directory.

Lines 3, 7: This is meant to get rid of the annoying CORS error we always get when we’re making an API request to a different domain. At this current stage (before deployment), React is running on port 3000 and Flask on port 5000. Hence, when React is making a request to Flask backend, this CORS error pops up. For more information on CORS errors, check out this or this link.

Lines 4, 8, 14: For the sake of readability, I’ve placed my HelloApiHandler.py in a sub-directory called api.

In my HelloApiHandler.py are just two simple GET and POST functions to handle GET and POST requests to this API endpoint:

To check and see if everything’s working, type

$ flask run

In your terminal, then go to localhost:5000/flask/hello (ref line 14 in app.py above) and you should see this:

Part 2 — Front-end (React)

Next, we’ll create a folder in the project directory for the front-end (React). I called mine “frontend”.

cd into that frontend folder and run

npx create-react-app .

This will create a new React project.

In your app.js file, make the following changes to test our GET request to our flask back-end.

If everything works, you should see this:

Okay great, so it works locally! Let’s try to get it deployed on Heroku.

Part 3 — Deployment on Heroku

For Heroku, set up an account then create a new app. In your settings tab, you’ll be able to scroll down and see something like this:

https://react-flask-tutorial.herokuapp.com/flask/hello is the back-end end-point we’re going to make a request to from our React front-end. Hence, in App.js (front-end), change axios.get(‘http://localhost:5000/flask/hello’) to axios.get(‘https://react-flask-tutorial.herokuapp.com/flask/hello').

Another minor edit that we have to make is to comment out the CORS related stuff on our back-end (App.py).

Next, in the frontend directory, run npm run build:

This creates our build folder:

In the root directory, create a Procfile and in it, write:

web: gunicorn app:app

Remember to take note of the spaces!!

Next, to generate the requirements.txt, cd into your root directory of this project and run:

pip freeze >> requirements.txt

I personally had to comment out the TBB line in my requirements.txt for the deployment to work. Not too sure why.

Since I already have an existing heroku app (I created it as a new app on heroku’s site), I just ran:

Next, just like how you would commit to GitHub, do the usual:

git add .
git commit -m "first deployment"
git push heroku master

Note that it’s heroku instead of origin in the last line.

Then wait and hope that it works :’)

Okay that’s it for this tutorial, let me know if you have any questions or face any issues :)

Happy ReFlasking! ¯\_( ͡❛ ͜ʖ ͡❛)_/¯

I really dislike shameless plugs but if you’re already thinking of getting a Medium membership for $5 per month, I’d really appreciate it if you’d use my referral link to sign up - https://reine-ran.medium.com/membership :)

Can I use React JS with flask?

How do you connect flask with React JS?

Which is better flask or React?

Can I use Python with React JS?