@@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 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
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!
Great video, an issue I was running into was using localhost for the JSON file, and so when I replaced localhost:3000 with 127.0.0.1, and after loading Localhost:3000 this seemed to work. Awesome job!
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!!!!!
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
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
🎯 Key Takeaways for quick navigation: 00:29 📁 *Created a folder named "flask-server" for the Python backend, then generated an empty file "server.py" within it.* 01:20 🔄 *Created a React app using `npx create-react-app client` for the frontend in the "react-flask-video" folder.* 02:23 ⚙️ *Configured the backend by creating a virtual environment, installing Flask, and setting up a basic Flask app with a route returning a JSON array of members.* 04:41 🗑️ *Removed unnecessary files and configured the frontend's `package.json` to proxy requests to the backend running on `localhost:5000`.* 05:52 🖥️ *Modified the frontend's `App.js` file, using `useState` and `useEffect` to fetch backend data and display it on the frontend.* 08:35 🔄 *Successfully fetched backend API data, displayed "members" on the frontend, and handled loading state during API request.* Made with HARPA AI
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
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
For those having problems, spefically import "flask" could not be resolved from sourcePylancereportMissingModuleSource import "flask_cors" could not be resolved from sourcePylancereportMissingModuleSource YOU MUST do pip install flask, and flask-cors BEFORE, BEFORE you activate the virtual environment! I spent so long trying to figure out why i was getting this error, and I JUST DISCOVERED IT. Then in your virtual enviorment install them as well.
@@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: ruclips.net/video/h96KP3JMX7Q/видео.html
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.
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?
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?
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?
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.
@@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
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!
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: ruclips.net/video/h96KP3JMX7Q/видео.html
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
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.
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 ?
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?
@@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)
@@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!
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
Despite having configured the proxy correctly, it still makes requests to port 3000 instead of 5000 when checking on the dev tools network tab. Any idea why is that?
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 '
Thanks for the video. I get an error when mapping data.members in react. 'Property "members" does not exist on type '{}'.' Can't find any good answers on Google :/. Any advice?
@@ArpanNeupaneProductions Yeah I figured it out. With typescript I have to explicitly define data types of incoming json elements in an interface, before I can map. More confusing. Great video, I'm just using a different environment
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.
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!
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.
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
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.
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!
Finally one Tutorial That connects the flask and react and it happens on my system thanks for the tutorial.
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, an issue I was running into was using localhost for the JSON file, and so when I replaced localhost:3000 with 127.0.0.1, and after loading Localhost:3000 this seemed to work. Awesome job!
so good, the best tutorial I managed to find for my project
Thanks for the great feedback!
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.
How far a you now ?
Much appreciated. I have been thinking about this for a while. Really nice to see someone explaining it crisp.
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
Man, so simple and easy. This is bang on! Love it
This is insane...! Thank you so much from Korea.
Now this tutorial is one of my core memory
All concepts got ingrained ♥️
Not too much, not too little. Fantastic tutorial, thanks!!
This is my first time as a backend dev understand how frontend gonna use my data in reactjs
... thank you
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!
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!
Simple and to the point with fabulous explanation ❤
Glad you think so!
In only 10 minutes, impressive!
Thanks!
If anyone is getting a proxy error with ECONNREFUSED. Then just restart the frontend.
Thanks for sharing!
@@ArpanNeupaneProductions not working =\
Could not proxy request /members from localhost:3000 to localhost:5000/
@@xfirexfirecun9672 I am getting the same error. Have you found a solution?
Wow I was stuck on this for hours. Thank you!
Amazing video, many thanks!!! Keep doing this great job.
great option to just understand basic seting up the projetc! thanks!
You’re welcome!
That was great!
Really helped me.
You've just got a sub!
Keep it up :)
I’m glad and thank you!
Short & concise
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.
This is very useful in every way. Thanks for the video!
Simple, good explanation! Thanks man really helpful :)
Appreciate it!
This guys going places
🎯 Key Takeaways for quick navigation:
00:29 📁 *Created a folder named "flask-server" for the Python backend, then generated an empty file "server.py" within it.*
01:20 🔄 *Created a React app using `npx create-react-app client` for the frontend in the "react-flask-video" folder.*
02:23 ⚙️ *Configured the backend by creating a virtual environment, installing Flask, and setting up a basic Flask app with a route returning a JSON array of members.*
04:41 🗑️ *Removed unnecessary files and configured the frontend's `package.json` to proxy requests to the backend running on `localhost:5000`.*
05:52 🖥️ *Modified the frontend's `App.js` file, using `useState` and `useEffect` to fetch backend data and display it on the frontend.*
08:35 🔄 *Successfully fetched backend API data, displayed "members" on the frontend, and handled loading state during API request.*
Made with HARPA AI
Actually it helped me a lot, thanks bro
thank you so much for such a precise video, that is efficient and succinct
Keep creating awesome videos like this! You'll reach a lot of viewership in no time. Thanks very much!
Thank you for the support!
Perfect explanations here.
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
What an incredible video!!!
Excellent job. This video was very helpful. Thank you.
Thanks for the positive feedback!
Love this videos ❤💯
Thanks for the video! Your content really helped me.
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
please help me with this error im stuck for ine day " JSON.parse: unexpected character at line 1 column 1 of the JSON data"
Short and sweet. thanks
Wow wow this is awesome
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
Very informative and easy to understand. Thanks
Glad it was helpful!
For those having problems, spefically
import "flask" could not be resolved from sourcePylancereportMissingModuleSource
import "flask_cors" could not be resolved from sourcePylancereportMissingModuleSource
YOU MUST do pip install flask, and flask-cors BEFORE, BEFORE you activate the virtual environment! I spent so long trying to figure out why i was getting this error, and I JUST DISCOVERED IT.
Then in your virtual enviorment install them as well.
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: ruclips.net/video/h96KP3JMX7Q/видео.html
Hi thanks for the video. I wonder how you install the autocomplete? I tried snippet installed but it seems not working thank you.
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.
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?
Thanks. Super helpful and clear!
Straight to the point. Noice.
simple and clear .Thanks
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?
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?
Stop react and restart again problem will be resolved
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.
@@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
@@radhesaini9689 Thank you bro. I spent 2 hours solving this issue and then just restarted server work for me
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!
The video was awesome! Could you tell me how react knew that the port of Flask was 5000?
Thanks! React knows that the port was 5000 because of the proxy that was set in the package.json file in the frontend.
@@ArpanNeupaneProductions Thanks for the fast response! Have a nice day
@@antoniomatos5540 You too!
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.
awesome tutorial
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: ruclips.net/video/h96KP3JMX7Q/видео.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
thanks man, huge help.
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.
Your keyboard sounds amazing
Good Explanation.
Thanks!
Awesome! Thanks!
You're welcome! Thanks for watching.
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.
Excellent tutorial. One question: If I wanna deploy it, what do I put in the proxy? My APIs public IP?
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.
Pretty cool!
perfect vid, thanks
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
simply perfect.
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 ?
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?
@@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)
@@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!
@@ArpanNeupaneProductions thanks for the suggestion, I'll check out axios right now
@@pshr2447 No problem!
This is perfect!
Thank you for this video
You’re welcome!
thanks for creating this video
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!
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 ?
To the point, big thanks
Hi, Could you mention the theme which you are using in VS Code, cause its awesome!
I was using the Panda Theme in this video
thanks arpan!
Despite having configured the proxy correctly, it still makes requests to port 3000 instead of 5000 when checking on the dev tools network tab. Any idea why is that?
Is your server hosted on port 5000?
@@ArpanNeupaneProductions I had to replace the localhost on the proxy with 127.0.0.1 to make it work. Thank you anyway!
@@mateuspokemon01 this fixed it for me
Perfect video 🤑🤑
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
venv is just for consistency of environment?
Awesome vid. Can you follow this up with how to dockerize it?
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
Which VSCode theme are you using bro its really cool?
I’m using the Panda Theme
@@ArpanNeupaneProductions Thankyouuu I love this theme!!!!
@@aryanpanwar6399 👍
@@aryanpanwar6399 You're welcome :)
bro in the end the console is showing the following error caught (in promise) SyntaxError: Unexpected token '
have you figured this out?
try restarting everything. then start python server, then start react. for me it worked
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
Thanks for the video. I get an error when mapping data.members in react. 'Property "members" does not exist on type '{}'.' Can't find any good answers on Google :/. Any advice?
Can you share the code?
@@ArpanNeupaneProductions It's the same as yours only I'm using typescript. I think there's an interface involved
@@christophernoble8284 I see, is the backend the same?
@@ArpanNeupaneProductions Yeah I figured it out. With typescript I have to explicitly define data types of incoming json elements in an interface, before I can map. More confusing. Great video, I'm just using a different environment
@@christophernoble8284 Sweet! Good luck with your project :)
I have some problem. For some reasson i get a double fetch and response every refresh on my site
Bro demand of react + python ?? From company side. Is it worth learning in 2021
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.
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!
excelent!
Thank you!
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.
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?
How would you "build" the app and launch it on the web, as it is right now for example, for example to Heroku
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
Here proxy has been set for localhost. But if I want to deploy it, what should I replace it with?
Will react forward all the sessions to the browser?
Can you please clarify what you mean by forwarding all the sessions to the browser?
@@ArpanNeupaneProductions Yes, Does it do that?