How to Create a Flask + React Project | Python Backend + React Frontend

Hey guys, welcome back. In this video, I will show you guys how to set up a project with a Flask backend and a React frontend. We will set up a backend API with Python that returns an array of members and in the frontend, we will fetch that backend and display the same members onto the frontend.
If you don't know what Flask is, Flask is a Python-based web framework that is used to create web applications. It is a microframework, which means that it does not provide many of the features that larger frameworks do. Flask is designed to be extended and customized, and it can be used for web development in both production and development environments.
If you don't know what React is, React is a JavaScript library for building user interfaces. It is maintained by Facebook and Instagram. React's declarative, efficient, and flexible nature make it an ideal choice for building user interfaces.
My Website: arpanneupane.com
My GitHub: github.com/arpanneupane19
Official Flask Documentation: flask.palletsprojects.com/en/...
Official React Documentation: reactjs.org/
My Programming Gear :
Keyboard: amzn.to/42vXkxh
Laptop: amzn.to/3CkAP3W
Laptop Stand: amzn.to/3X116Oi
Desk: amzn.to/43wmIEt
Monitor: amzn.to/42BAaFH
Monitor Arm: amzn.to/3NR0APS
Chair: amzn.to/42vvKAn
Desk Mat/Mousepad: amzn.to/43AhKqj
Microphone: amzn.to/45RuQ43
Headphones: amzn.to/445sf4R
#Coding // #Python // #React // #LearnToCode

[@nathanseals4819]

Excellent content! As someone that loves using React but prefers Python for backend, this video is amazing. I did run into a CORS error when connecting the front and back-end. The fix was as simple as installing and importing Flask-CORS to my server.py. Thanks again!

[@ArpanNeupaneProductions]

Of course! Thank you so much for watching!

[@renatox5288]

mee too, i dont know why. but this can affect security no?

[@xXHelsingGamingXx]

You are freaking awesome building and explaining react + flask as minimal as it gets!!!

[@ArpanNeupaneProductions]

Thank you so much!

[@AM-nv4ol]

one of the best tutorials i've ever watched in general. everything is broken down so well and your delivery is perfectly concise. well done.

[@ArpanNeupaneProductions]

Thank you!!

[@cometolearn8598]

@@ArpanNeupaneProductions Bro here You said arpan@Arpan-MBP React-Flask-Video % npx create react ct-app client. What do we replace 'arpan@Arpan-MBP' I replaced it with my user data like this 'MyUSER@MyUSERworks doesn't work I even put the '-MBP' in front of the second MyUser it still doesn't work. Can you please help me with this?

[@ArpanNeupaneProductions]

@@cometolearn8598 you don’t have to do that. That’s just my computer stating that I am signed in as arpan on Arpan-MBP which is my laptop.

[@cometolearn8598]

@@ArpanNeupaneProductions in windows when I do: 'npx create ct-app client' it gives the error: npm ERR! could not determine executable to run npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\MyUser\AppData\Local pm-cache\_logs\2023-06-11T03_39_26_191Z-debug-0.log

[@ArpanNeupaneProductions]

@@cometolearn8598 That is because create-react-app has been deprecated.

[@mohajeramir]

Much appreciated. I have been thinking about this for a while. Really nice to see someone explaining it crisp.

[@ashdotpy]

ive watched 3 or 4 other videos trying to get this to work and finally got it thanks to yours. well explained and walked through! thanks!!

[@ArpanNeupaneProductions]

Glad it helped

[@mitchell-conrad]

Great video, this really helped me out. Python is new for me, and I wanted to jump into it by making a web app. This gave me a great start, it was so easy to follow

[@amitrangwal7177]

Finally one Tutorial That connects the flask and react and it happens on my system thanks for the tutorial.

[@matthew_kompel]

awesome video man! I'm new to this stuff and your content really helps me. I wish I new about your videos before I started a project as I would have progressed a lot more. Either way, I really appreciate the content you make. recently one of my best friends from high school passed away and I wanted to make something in memory of him and I thought that making a website would be the best for him. Your videos have really allowed me to accomplish my goal. He was like a brother to me and because of you I can become closer to him. Thank you!!!!!

[@ArpanNeupaneProductions]

Thank you so much for your support and taking the time to write that. I really appreciate it! Also, I'm very sorry for your loss.

[@juliabuchko4204]

so good, the best tutorial I managed to find for my project

[@ArpanNeupaneProductions]

Thanks for the great feedback!

[@DRDR3ADSA]

Man, so simple and easy. This is bang on! Love it

[@shreehari2589]

This is the type of content no one makes and literally very important, keep up the good work, can you make a video on how to integrate flask with react native

[@vatssv3006]

Simple, to the point high quality content. Loved it!

[@ArpanNeupaneProductions]

Thank you!

[@lakshaychauhan9190]

Simple, good explanation! Thanks man really helpful :)

[@ArpanNeupaneProductions]

Appreciate it!

[@shamsshaikh2887]

thank you so much for such a precise video, that is efficient and succinct

[@bekirkagankaraahmetoglu4343]

This is very useful in every way. Thanks for the video!

[@mookjais]

Not too much, not too little. Fantastic tutorial, thanks!!

[@jacobgoldenart]

Thanks. Super helpful and clear!

[@user-fj5eh5pz4o]

This is insane...! Thank you so much from Korea.

[@Ananiascn]

Thanks for the video! Your content really helped me.

[@alireza2295]

Short and sweet. thanks

[@Juswahh]

huh python is pretty sweet I shouldve been using this for my backend a long time ago lol. awesome tutorial man simple and very quick

[@ArpanNeupaneProductions]

Thank you!

[@XxxRay3]

Now this tutorial is one of my core memory All concepts got ingrained ♥️

[@sthefanocarvalho2823]

That was great! Really helped me. You've just got a sub! Keep it up :)

[@ArpanNeupaneProductions]

I’m glad and thank you!

[@felipedepra2745]

Amazing video, many thanks!!! Keep doing this great job.

[@wojciechzarzecki1286]

great option to just understand basic seting up the projetc! thanks!

[@ArpanNeupaneProductions]

You’re welcome!

[@santoshernandez5677]

Excellent job. This video was very helpful. Thank you.

[@ArpanNeupaneProductions]

Thanks for the positive feedback!

[@gemymohamed9334]

Short & concise

[@barblehurgy]

Perfect explanations here.

[@PaulThiongo-rv7so]

simple and clear .Thanks

[@FadeStrategy]

This is perfect!

[@maikelberbi5210]

simply perfect.

[@JorgeBlancoPhotography]

This was an awesome tutorial thank you very much!

[@ArpanNeupaneProductions]

Thanks!

[@JorgeBlancoPhotography]

@@ArpanNeupaneProductions would be cool to see how to deploy a project like this, I like the python react combo, seems to be a clean and clear environment.

[@ArpanNeupaneProductions]

@@JorgeBlancoPhotography I see, I haven't done a video on deployment because I've been busy with some personal projects. However, I would recommend that you check this video out to learn how to deploy a Flask + React App to Heroku: kzbin.info/www/bejne/nmqZfINpf7KLbbM

[@liamlindy]

What an incredible video!!!

[@anonymousk5899]

Love this videos ❤💯

[@lachlancroll2386]

thanks man, huge help.

[@wohu1]

Hi thanks for the video. I wonder how you install the autocomplete? I tried snippet installed but it seems not working thank you.

[@MauricioMartinez0707]

perfect vid, thanks

[@heitormbonfim]

In only 10 minutes, impressive!

[@ArpanNeupaneProductions]

Thanks!

[@Covalent5]

Excellent tutorial. One question: If I wanna deploy it, what do I put in the proxy? My APIs public IP?

[@dinulkithsara2580]

thank you so much bro

[@judevector]

Wow wow this is awesome

[@CodeMastersChannel]

thanks for creating this video

[@andrewzolensky9807]

This was a great video! Would you be willing to do one on how to host it using a cloud provider like AWS or GCP?

[@sahilsharma2867]

Straight to the point. Noice.

[@srb.11]

Here proxy has been set for localhost. But if I want to deploy it, what should I replace it with?

[@koriv6329]

Awesome! Thanks!

[@ArpanNeupaneProductions]

You're welcome! Thanks for watching.

[@chakibbounoun2349]

To the point, big thanks

[@arxrushgamestv5773]

You're really fast in typing...I'm impressed..Anyway, great content!

[@ArpanNeupaneProductions]

Thank you!

[@user-gi9ee7kp6j]

Very informative and easy to understand. Thanks

[@ArpanNeupaneProductions]

Glad it was helpful!

[@poojittummalapalli7634]

thanks arpan!

[@wesleyjcr]

Thank you for this video

[@ArpanNeupaneProductions]

You’re welcome!

[@ljrahn5619]

Keep creating awesome videos like this! You'll reach a lot of viewership in no time. Thanks very much!

[@ArpanNeupaneProductions]

Thank you for the support!

[@lilburtonboy7489]

Do routes need to be registered or something? I have the exact same thing you have here at the4 beginning, but I get a 404 when I go to /members.

[@agustintisera6992]

Hey Arpan! I'm looking for the next step on this tutorial, basically trying to define a sqlite3 db to have a simple CRUD for users. I'd appreciate that knowledge, not necessary has to be recorded with a video. Any github/reference is welcome!

[@OshadhaWijerathne2000]

🔥

[@millpreetk1406]

what's the plugin you're using that shows you the size of the react import or whatever? as well as the one that allowed the quick sample upload? I tried and those features didn't work for me. But tutorial is overall good and concise, love it

[@noir371]

Your keyboard sounds amazing

[@luisgranados2006]

Hi Arpan, thank so much for your tutorial, it will help me a lot in my projects :D. But, I have a question, what should we do if we want to deploy the project? Will they have to be separated? for example, flask in "pyhtonAnyWhere" and react in "Versel"? Or, can we keep them together? for example, together in "Vercel"?

[@ArpanNeupaneProductions]

Thank you for liking the video! I haven’t done a video on deployment because I’ve been really busy with school, but if you’d like to deploy a project like this, I’d recommend checking Miguel Grinberg’s video on it: kzbin.info/www/bejne/nmqZfINpf7KLbbM

[@luisgranados2006]

@@ArpanNeupaneProductions :o Dont worry. Thank so much, I will check that tutorial

[@ArpanNeupaneProductions]

@@luisgranados2006 👍

[@animeshmishra4282]

I am having the same doubt Like if i deploy an api and app at two different domains or something else

[@anirudhsuri6034]

Hello. But how will be get the url parameters from backend... e.g. in flask route and how can be reflet that in axios...?? thanks.

[@milesthomas3317]

Thank you so much :)

[@ArpanNeupaneProductions]

You’re welcome :)

[@millerbento9785]

Do you have to do something specific to deploy it? I mean, have the Python back end and Flask front end running in the server.

[@emars0]

If i wanted to return an img url, how would i do that? Im new to python and I cant find any tutorials on how to do this. Btw, amazing video, explains things perfectly, had problems with CORS but fixed that easily.

[@mohammedaltaf4316]

Simple incredible

[@TitaniumTronic]

Hello, this is the most useful video I found, but please make a video on how to setup a group project, like one person does backend and one does frontend

[@ArpanNeupaneProductions]

Thanks and stay tuned!

[@sanukjoseph]

Good Explanation.

[@ArpanNeupaneProductions]

Thanks!

[@millpreetk1406]

venv is just for consistency of environment?

[@programmingholic]

You have to make playlist for all , so we can book mark it, thanks for sharing. i have seen you don't have any playlist

[@roboticproccessautomationr9200]

Thank you very much for your video ... But I have a question ... how do you deploy the project? above all I would like to know how to do in windows server for example .... greetings.

[@ArpanNeupaneProductions]

You're welcome! I haven't deployed to a Windows server before so I'm not sure. Maybe try looking up documentation for it or finding some videos that may provide you with information?

[@vulcanhd1649]

How would you "build" the app and launch it on the web, as it is right now for example, for example to Heroku

[@camilovillalobos2711]

excelent!

[@ArpanNeupaneProductions]

Thank you!

[@5enox]

Really amazing and easy to follow, just one question, If a user uses the network developer tool, The backend API can be exploited and scraped, How can We hide it, or avoid this situation

[@BoltAtlas]

Do we *Have* to create a virtual environment in order to make a connection between the front and the back end? That's the only step I omitted, and I'm getting this error in the terminal when I run the React app : Proxy Error: Could not proxy request /members from localhost:3000 to htttp://localhost:5000/ and on the browser itself, it gives the following error: JSON.parse: unexpected character at line 1 column 1 of the JSON data any help?

[@levivolkart126]

That video helped me solve the issue: kzbin.info/www/bejne/hGXchpyHnrmprbc

[@DevlogBill]

Pretty good video, I haven't reached that level yet. I know the fundamentals with JavaScript now I started to learn again Python. Python I learned some of the fundamentals, was my first language which introduced me into programming. Anyways, is Flask easier to learn versus Django? Not sure but I think I may want to learn how to become full stack with JavaScript and Python. But I think you see Django more in the market for jobs over Flask.

[@ArpanNeupaneProductions]

Flask is easier to learn than Django

[@DevlogBill]

@@ArpanNeupaneProductions ok thank you

[@ArpanNeupaneProductions]

@@DevlogBill anytime :)

[@direshanphillips1812]

Hi Arpan, thank you for the great tutorial. I am using a Mac just to familiarise myself with this OS. Two questions please. 1) I can only find debug console. I can't seem to see the Console where the object can be printed. Secondly I am not entirely sure why the app only shows Loading.... I don't understand why it is undefined. The browser returns results but something is missing. import React, {useState, useEffect } from 'react' function App() { const [data, setData] = useState([{}]) useEffect(() => { fetch("/members").then( res => res.json() ).then( data => { setData(data) console.log(data) } ) }, []) return ( {(typeof data.members === 'undefined') ? ( Loading... ) : ( data.members.map((member, i) => ( {member} )) )} ) } export default App

[@ArpanNeupaneProductions]

Can you share the code in your Python file?

[@jikarnajmal-din6221]

The front end port might be taken by another task. free up the port and it will work.

[@tiger7858]

Perfect video 🤑🤑

[@Khhghhfd5755]

So great logic to get the API, but how to use it to make a application? Thank you. Can I should normal react application to use this API? Thank you. It's like, if I'm gonna make some input, how can I make sure the input data that will use the API to go to be in the database? Thank you so much.

[@ArpanNeupaneProductions]

Yes! This API can be used in a real application. If you want to receive input to a database, you can make forms in React to type input into. Then, you can store the value of each input form in a variable and send that variable through a post request to the backend using Axios. In the backend, you’ll just have to set up routes for that post request and you can access the data that was sent from the frontend and use it however you’d like.

[@RocknRollDina]

amaing!

[@vinit.khandelwal]

Awesome

[@ArpanNeupaneProductions]

Thank you!

[@xXHelsingGamingXx]

Hi, Could you mention the theme which you are using in VS Code, cause its awesome!

[@ArpanNeupaneProductions]

I was using the Panda Theme in this video

[@Grinwa]

Please am completely new to js i want to make gui for my API it is basically a webview that will load a website with custom cookie's, i have no idea how to do it with js, is it even possible. Do u recommend any documentation

[@kikevanegazz325]

Pretty cool!

[@rhz8446]

thankyou sir

[@tiyashaghosal183]

Hey, I needed a little help. Even though the members array is showing in my console, but in the web page it is still showing "loading..." Can anyone help me with this? Thanks a lot!

[@manpt123]

This is my first time as a backend dev understand how frontend gonna use my data in reactjs ... thank you

[@antoniomatos5540]

The video was awesome! Could you tell me how react knew that the port of Flask was 5000?

[@ArpanNeupaneProductions]

Thanks! React knows that the port was 5000 because of the proxy that was set in the package.json file in the frontend.

[@antoniomatos5540]

@@ArpanNeupaneProductions Thanks for the fast response! Have a nice day

[@ArpanNeupaneProductions]

@@antoniomatos5540 You too!

[@purushothamanpalanichamy6542]

please help me with this error im stuck for ine day " JSON.parse: unexpected character at line 1 column 1 of the JSON data"

[@l.e.nichols9382]

Awesome vid. Can you follow this up with how to dockerize it?

[@powerfulcreations]

Thanks a lot

[@drain1635]

Thank you

[@fanir2661]

Hi, great tutorial Thank you! There's just one problem I'm having - I get an error in my localhost:3000 "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" and don't see the json that was sent. Do you have any idea how to solve this?

[@ArpanNeupaneProductions]

Hmm, do you have a link to your code? If it’s a SyntaxError then can you please check your code on the frontend side to make sure that it is the same as the code in the video?

[@radhesaini9689]

Stop react and restart again problem will be resolved

[@nathanseals4819]

I ran into a similar issue. The request to the server was refused because of CORS. In your server, run "pip3 install flask_cors", then in your server.py import the cors (from flask_cors import CORS), lastly insert "CORS(app)" under the app declaration. This will allow your react project to make Cross-Origin requests.

[@ur_4180]

@@nathanseals4819 i had a similar problem, i tried to follow your suggestion and apparently it works. Thank you for helping me sorry i'm not fluent in english

[@harshvpatel1542]

@@radhesaini9689 Thank you bro. I spent 2 hours solving this issue and then just restarted server work for me

[@lenovok4note298]

Hello bro i need to contacts on some flask issue , for most commands it is showing object not found and commandnotfoundexception , i think you can help this

[@karimpanacci]

Basically there are 2 servers right? The nodejs server and then the python server? Or am I wrong?

[@bryngoldman7373]

Hey, removing the logo and index files is creating a compile error. When I do not remove them, my app has a logo in the background. How do I fix this?

[@pshr2447]

Thanks for the tutorial.... But my python code needs input when you call it, which I'll be obtaining from the frontend...so how can i make the call to the api which needs an input to output data... Also if i have my project on say pythonanywhere or heroku, should i follow the same steps shown here ?

[@ArpanNeupaneProductions]

Can you further specify what you're trying to do so that I can better assist you? Are you trying to get data from the frontend such as the input entered in forms and receive that same input in the backend?

[@pshr2447]

@@ArpanNeupaneProductions Yeah mate, basically I'm making a youtube analytics website, like getting playlist length etc... I'm working on my frontend with react js, so I'll be getting some input from the user such as the playlist id, etc.. then i want to take all that arguments and call my python api which will have different classes for fetching different data from the youtube api...so basically i just needed to know how can i pass those arguments to the python api from the frontend. (When I'm going to push it in production, I'm going to host my frontend on vercel and on my Python api on heroku)

[@ArpanNeupaneProductions]

@@pshr2447 I see, in your frontend with React, you can send those input values to the backend with Axios by sending POST requests. Your backend will then catch those POST requests and then get the request body with the input values and you can use them however you’d like :) Hope this helps!

[@pshr2447]

@@ArpanNeupaneProductions thanks for the suggestion, I'll check out axios right now

[@ArpanNeupaneProductions]

@@pshr2447 No problem!

[@Randomredditvids_]

hello, can someone help, I added proxy to package.json, but my react app still points to localhost 3000 and cannot find data

[@stumpydes]

Can they all work on single server, i am looking for running a landing page using flask itself

[@ArpanNeupaneProductions]

Are you trying to have just Flask and HTML ?

[@techandgaming17]

Woow!

[@ReactFli]

so how to deploy that to netlify?

[@corretorortografico5534]

Excellent video! Really helpful. I just have some questions. How do we call this: " {useState, useEffect} "? I recon there's a name for it, but I don't recall. I really want to understand what does it mean.

[@joonbae8136]

i think you are talking about react hooks

[@sh44ko58]

with useState ur getting data from inputs or arrays.. And useEffect is basicly to this one or multiple times

[@Cdxvfx]

Bro demand of react + python ?? From company side. Is it worth learning in 2021

[@ArpanNeupaneProductions]

React is the most popular frontend library and is used a lot. Python is great as well and is great in machine learning, data science, AI, and web development and they can both be used to create great applications. Now, I don't know about companies since I haven't worked at any because I'm only 13, but I'm sure some companies do use them. Larger companies might also use them along with other languages.