How to Create a Flask + React Project | Python Backend + React Frontend
ฝัง
- เผยแพร่เมื่อ 24 มิ.ย. 2021
- 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 - วิทยาศาสตร์และเทคโนโลยี
![THE TOYS x NONT TANONT - ดอกไม้ที่รอฝน (spring) [Official MV]](http://i.ytimg.com/vi/pPa1d5cC8M4/mqdefault.jpg)
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!
Of course! Thank you so much for watching!
mee too, i dont know why. but this can affect security no?
Thank you, man! I'm from Brazil and don't found nothing in my language so good like this video. You Are great!
You are freaking awesome building and explaining react + flask as minimal as it gets!!!
Thank you so much!
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.
Thank you!!
@@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?
@@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.
@@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
@@cometolearn8598 That is because create-react-app has been deprecated.
Much appreciated. I have been thinking about this for a while. Really nice to see someone explaining it crisp.
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!!
Glad it helped
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
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!!!!!
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.
Finally one Tutorial That connects the flask and react and it happens on my system thanks for the tutorial.
Man, so simple and easy. This is bang on! Love it
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
Simple, to the point high quality content. Loved it!
Thank you!
Not too much, not too little. Fantastic tutorial, thanks!!
so good, the best tutorial I managed to find for my project
Thanks for the great feedback!
This is very useful in every way. Thanks for the video!
Simple, good explanation! Thanks man really helpful :)
Appreciate it!
Hi thanks for the video. I wonder how you install the autocomplete? I tried snippet installed but it seems not working thank you.
Amazing video, many thanks!!! Keep doing this great job.
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
Thank you!
Now this tutorial is one of my core memory
All concepts got ingrained ♥️
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.
thank you so much for such a precise video, that is efficient and succinct
This is insane...! Thank you so much from Korea.
Thanks for the video! Your content really helped me.
That was great!
Really helped me.
You've just got a sub!
Keep it up :)
I’m glad and thank you!
Thanks. Super helpful and clear!
Excellent job. This video was very helpful. Thank you.
Thanks for the positive feedback!
Here proxy has been set for localhost. But if I want to deploy it, what should I replace it with?
Actually it helped me a lot, thanks bro
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.
great option to just understand basic seting up the projetc! thanks!
You’re welcome!
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!
Excellent tutorial. One question: If I wanna deploy it, what do I put in the proxy? My APIs public IP?
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.
Short & concise
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?
How would you "build" the app and launch it on the web, as it is right now for example, for example to Heroku
please help me with this error im stuck for ine day " JSON.parse: unexpected character at line 1 column 1 of the JSON data"
hello, can someone help, I added proxy to package.json, but my react app still points to localhost 3000 and cannot find data
Short and sweet. thanks
this got me confused: if I remove line that checks whether data.members is defined or not, then i got error message 'map' is undefined. Does anyone know why?
Simple and to the point with fabulous explanation ❤
Glad you think so!
Perfect explanations here.
simple and clear .Thanks
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
What an incredible video!!!
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
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
venv is just for consistency of environment?
awesome tutorial
Keep creating awesome videos like this! You'll reach a lot of viewership in no time. Thanks very much!
Thank you for the support!
Basically there are 2 servers right? The nodejs server and then the python server? Or am I wrong?
thanks man, huge help.
This guys going places
Love this videos ❤💯
Please help me I cannot see the return api in local:500. "This site can’t be reached localhost refused to connect." is all it says to me
Very informative and easy to understand. Thanks
Glad it was helpful!
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!
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?
In only 10 minutes, impressive!
Thanks!
This was an awesome tutorial thank you very much!
Thanks!
@@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.
@@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: th-cam.com/video/h96KP3JMX7Q/w-d-xo.html
so how to deploy that to netlify?
it gets console logged twice for me, why do you think this is happening?
Hi. Where is the venv creation for windows?
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
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.
Your keyboard sounds amazing
Wow wow this is awesome
This is perfect!
perfect vid, thanks
Straight to the point. Noice.
Can i host it on netlify
sir i have created a python code which convert sign language to text ... can u pls help me to create a website like the one above
Can we not do this in jquery/plain js ajax at client side,,,, I’m still not getting why separate instance for running react when you can do same thing with ajax. Please correct me / help me understand this better
Can you specify what you're trying to accomplish?
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?
That video helped me solve the issue: th-cam.com/video/N4yUiQiTvwU/w-d-xo.html
What theme is that ?
Awesome! Thanks!
You're welcome! Thanks for watching.
To the point, big thanks
simply perfect.
thanks arpan!
thanks for creating this video
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
This is my first time as a backend dev understand how frontend gonna use my data in reactjs
... thank you
Thank you for this video
You’re welcome!
What would need to be done to web host this (say on PythonAnywhere lol), just change the address of the proxy in the package.json file ?
You'd first need to run 'npm run build' in the frontend and serve the index.html file in your build folder in your backend in order to deploy to PythonAnywhere.
Hello! im a beginner. and I have a question. Why does the blank array in 8:31 makes the code to run only once? why is that? Thankyou!
Check out my video on useEffect
hey i tried it and this error came : I know this is minor problem but as I'm new to react i cant figure out why and where it parsing html as json instead of accessing members
SyntaxError: Unexpected token '
did u solve the error if so please help im stuck
hey, I am following it, for some reason not able to fetch the data on my console and so on the front end, any help?? what I am doing wrong here
Send me your code
How can I update the backend from the react app? add a new member or delete one. Is it possible? Thanks.
You can send POST requests that contain data to an endpoint in the backend. The endpoint can then handle the data and do things like adding it to a database.
Wow❤
Awesome vid. Can you follow this up with how to dockerize it?
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"?
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: th-cam.com/video/h96KP3JMX7Q/w-d-xo.html
@@ArpanNeupaneProductions :o Dont worry. Thank so much, I will check that tutorial
@@luisgranados2006 👍
I am having the same doubt
Like if i deploy an api and app at two different domains or something else
How can i hist all of this?
Good Explanation.
Thanks!
thank you so much bro
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
Can you share the code in your Python file?
The front end port might be taken by another task. free up the port and it will work.
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
Thanks and stay tuned!
Thank you so much :)
You’re welcome :)
Can they all work on single server, i am looking for running a landing page using flask itself
Are you trying to have just Flask and HTML ?
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.
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.