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: https://arpanneupane.com
My GitHub: https://github.com/arpanneupane19
Official Flask Documentation: https://flask.palletsprojects.com/en/2.0.x/
Official React Documentation: https://reactjs.org/
My Programming Gear :
Keyboard: https://amzn.to/42vXkxh
Laptop: https://amzn.to/3CkAP3W
Laptop Stand: https://amzn.to/3X116Oi
Desk: https://amzn.to/43wmIEt
Monitor: https://amzn.to/42BAaFH
Monitor Arm: https://amzn.to/3NR0APS
Chair: https://amzn.to/42vvKAn
Desk Mat/Mousepad: https://amzn.to/43AhKqj
Microphone: https://amzn.to/45RuQ43
Headphones: https://amzn.to/445sf4R
#Coding // #Python // #React // #LearnToCode
by Arpan Neupane
linux web server
Hello
now how to deploy this?
🔥
Here proxy has been set for localhost. But if I want to deploy it, what should I replace it with?
I don't know what is going to mine, though. I keep getting "Syntax Error: Unexpected character" even though I followed the tutorial. One thing is I'm using Vite not CRA and even though I inserted the "proxy": "http://localhost:5000" on my package.json, it still looks like react didn't know that it's in there.
I fixed it by giving the fetch the full url — fetch("http://localhost:5000/api"😉 this may look absurd but it will do for now.
make video how to connect mongodb with react and express
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?
thank you so much bro
Now this tutorial is one of my core memory
All concepts got ingrained ♥️
Sometimes watching tutorials is like watching the same origin story over and over again.
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.
Much appreciated. I have been thinking about this for a while. Really nice to see someone explaining it crisp.
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
Wow wow this is awesome
thanks arpan!
I had to add / import MiddleWare and then it worked the flask Api part
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?
Perfect explanations here.
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?
This is my first time as a backend dev understand how frontend gonna use my data in reactjs
… thank you