How to connect frontend and backend in javascript | Fullstack Proxy and CORS
ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 2023
- Visit chaicode.com for all related materials, community help, source code etc.
Learn to connect frontend build in react with backend build in express. We will learn how these technologies talk to each other
Sara code yaha milta h
github.com/hiteshchoudhary/
Discord pe yaha paaye jaate h:
hitesh.ai/discord
Instagram pe yaha paaye jaate h:
/ hiteshchoudharyofficial - บันเทิง
![ลักพาตัว เอาลูกเอิร์นกลับมา...!! [เอิร์นไดเม่]](http://i.ytimg.com/vi/f4NVKlZ5qkk/mqdefault.jpg)
00:03 Don't be afraid of production
01:49 Understanding the best practices for backend and frontend development
05:27 Setting up the backend
07:13 Creating a server with Express
10:55 Connecting backend with frontend using Fullstack Proxy and CORS
12:50 Setting up backend and frontend connection
16:15 Connecting backend with frontend in Fullstack Proxy and CORS
18:01 Connect backend with frontend
21:36 Introduction to backend and frontend connection
23:47 Request a GET from Jio
27:08 Cross-origin requests and whitelisting URLs to avoid errors.
28:37 Configure whitelisting to allow only specified IPs or domains.
31:51 Standardization of backend API
33:26 Proxies are used to standardize and simplify URL requests.
36:45 Configure server to automatically append '/api' to requests
38:34 Proxy allows the server to know the origin of the request
41:46 Proxy is a solution to handle errors related to CORS.
43:20 Connect backend with frontend using Fullstack Proxy and CORS
46:41 Issue with propagating frontend changes in the backend
48:57 Connecting backend with frontend using proxy
Thanks bro. It helped a lot
Gazab, well done
I remember 3 years before building my first Full Stack WebApp with my 3 friends and struggling with CORS for a week back then MERN Stack was just coming up and not many good tutorials was there. Thanks Hitesh Sir for such wonderful videos
Thanks for sharing!
@Hiteah bro : I have a question, is it a bad practice to use the cors npm package to solve the cors error?
Yes,you are right ,even I spend a week for CORS
Sir you covered lots of topics in this video, I think it should be in full stack and also lies in both but mostly it should be in Frontend majorly
due to hitesh sir i solved it just in 1 hour.
Learnt react from you around three months back.Started backend series from this channel for college project,wrote the backend myself and it was now time to connect the frontend written by my friends and my api's.Glad you have everything covered🙌😍
my friend recommended me this video. i was having theses same issue like integration, API calls and Cores , this video is all in one. HIGH recommends this videos to those who are having issues like these.
I remember when i literally fixed cors with headers , but learning about those was such a pain , Sir you really doing a great job by providing every single detail that most tutorials fails to provide and we as a learner suffer during production
You and sherriyansh coding school is best for coding
Yes
Sheriyanscoding + Hitesh sir + Akshay saini = 🎖🎖🎖🎖🎖
Right...
Specially shreyans design contact is on another lavel
Aray aag lga rakhi hai web dev mein in logo ne @sheryianshcodingschool
maine backend series me dekha,,,,,,,,,,, thank you so muchh finally ab samaz aaya backend se frontend data kaise jata.......... YOU ARE REALLY A BEST TEACHER NOT ONLY BECAUSE OF CONTENT , YOUR TEACHING STYLE IS AMAZING.... THANK YOU SO MUCH FOR MAKING IT SO MUCH EASY SO BEGINNER CAN UNDERSTAND, I HAVE FERAR OF PROXY AND HOW TO CONNECT FRONTEND TO BACKEND BUT AFTER WATCHING AND SIMALTANIOUSLY PRACTICING GET THE WHOLE IDEA... YOU ARE REALYY A GREATER TEACHER IN THE WORLD............
Backend series me dekha ye video, kafi sari cheeje seekhne ko mili. Great content.
Recently, I was planning to build my college mini project using React and Django, but I was very confused about connecting them, saw a lot of youtube videos, mostly they were teaching this technique only by running build and merge it into the backend project, but I had a doubt about if I change the frontend then I have to follow the build process again, but today, you not only cleared my doubts but explained it very deep.
Thankyou sir ❤ for this amazing content.
And waiting for the useEffect video.
The thing which takes more than a day to understand is explained so easily and clearly by u sir. Thank you sir! You are making me understand the basic backend and frontend concepts easily.
sir 3 bar video dakha hy phr ja kar sab kuch 1 dam clear howa thanks app ka video itni bar dakhtay hain nhi tu life main 2nd bar move dakhnay ka dil nhi krta many many thanks.
Thanks for itna aache se samjane ke liye. ye to he ki jisne aapkia Series follow kar li, full stack ke sath ek acchi company me job le hi lega, or hum jese logo ka 100% hike lag jana he.
Can't wait for these backend videos. Thanks Hitesh sir. ❤
Watched this inside backend series. Great insights on cors, proxy and fe be communication
I am currently working as a fullstack dev for 1.5 years ( java + react ) but i must say this video is so helpful and full of new knowledge
God level explanation. I had enrolled in some paid courses, but none made these topics exciting. I didn't understood about these topics in those courses. I don't why everyone make backend so much complex, but your teaching style cleared all my doubts about CORS and proxy. It is so nice you started explaining backend topics from production level point of view, which is usually covered by others in the end of their courses. Sir you had changed my approach to backend. Thanks for providing valuable information at free of cost.
I have always searched the internet for a good video on connecting backend with the frontend but never found one that was so complete and easy to understand. These types of videos let us know about so many details that get abstracted by the frameworks and all. Thanks a lot for teaching us the real engineering!
Glad I could help! ❤️
Hitesh sir, that's a great explanation. We are not experiencing any CORS issues when connecting frontend and backend with proxy.
This session really helped me understand what CORS error is.
Bs CORS n Proxy smjh aa gya, itna hi goal h is video ka
@@chaiaurcode yes sir
I don't remember when last time I saw an explanation like this. Thank you for such an amazing module.
I have done around 2 full backend courses completely and none had all the contents required for production grade, i was stuck on how to upload pdf files (basically files) while i was working on my college project and i got your 11th video of this series and then i went through your channel and here i am now determined to watch your full course of backend. I don't know why but there's something in your interaction and content that i am already sure that i won't need to watch lectures anymore after this playlist. you've already shown how to deploy the site in last lecture. All the courses promise to go from beginner to advance but they just leave us hanging somewhere in intermediate level. I feel this course is covering every level at once. I hope you read it sir. Thanks a lot and i really mean it from depth of my heart.
THIS BACKEND SERIES IS JUST AMAZING 😍
Thanks 🤗☕️
Aap aur sheryians coding school is the best for Morden web development
Exactly Aman Bhai
@@RelaxingQuranReflection6000 yess bhai
it is true. I saw this in my previous company where I was working as a react developer. Thank you for explaining I learned something new, would finish this series soon
One of the best teacher. I was struggling with JS. Watched many tutorials. But your JS course is the best among all those tutorials. #chaiaurcode #backenddevelopement
Mein fullstack developer hun , fir bhi aapki experience sunne ke liye yaha aaya hu
Amazing video❤ Hitesh can you post a video about rendering images in an efficient way (how image handling is done in react in production apps)...how we can reduce the size without much quality loss... I have developed many apps but handling images is still troublesome...jitters and content moves away...I have not checked your other videos so I don't if you have already posted one in this react series...an updated video would be much helpful... I know few techniques where loading a low quality image and blur them and then once the image is loaded we can show them... another one is to use something like shimmer effect...
images handle krna easy nhi h because kaafi backend use hota h usme. React ka kaam sirf images to backend ko transfer krna h. Ab backend ko images ko optimize krna, CDN pe rkhna n all sab krna hota h. Is problem ko solve krne ke liye Multi million dollar startups h. Aane waale dino me kuch videos include krte h ispe.
@@chaiaurcodeAh sorry for not explaining the question clearly...if the images are given by client through figma (some clients give 2-3mb image) in this case I face issues to render them in react effectively so that page doesn't take too long to display... I'm aware of loading images lazy or using blur low quality image and once the original image is loaded display them...but I wish to know how it's done on production apps... I hope you now understand.. thank you and I too also have used the same putting the dist folder in the backend folder😅😅😅
ap ko auto generate extension ka pta hai ? jo sir ne use ki hoi hai vdeo me ?
sir extension name bta dein jo code ko auto generate kr rhi hai @@chaiaurcode
@@user-bv7jd4ct1n konsi video plz batao
Now it has become a habit to watch your videos before going to bed ....So much knowledge sharing without taking a penny is highly commendable ....Hats off ,Keep helping us by improving our development skills
Your Videos are great! Now I am sufficiently confident in backend too.
Apka bhut bhut dhanywad jo apne hum sabko itne saral tareeke se sekhya hai !!
Sir m to postman tutorial search kya tha ap ki backend series mil gai ab wahi dekh raha hun bohot awesome ha
This video is very important for beginers who stuck in how to connect frontend and backend. I learned lot of concept and best practices from this video .
Amazing as always. Enjoyed the workflow of backend and frontend + CORS Policy + Bad Practices are super nicely explained. Thank you sir 🤩🤩🤩
Amazing video Sir , itna in depth kisi ne nhi padhaya thank you so much Sir
Loving this backend series. Kuddos to you for being one of the finest educator.
You are the Best Developer in the world!
Thanks bro ur one like "sirf ek koi to chahiye jo kehde tuu kr sakta haii" thanks from hello world programmer
finally ajj mega project react series ka kahtam kar diya. 1 baar apka sath sath banaya or 2 baar khud se or abb full confidence bas abb freeApi ko use karka ecommerce wala project bana na ka plan hai. Thank you soo much sir for this great content
Done my react very earlier... After Spring boot now aapki saran mai aaya hhu...
Movies sai jyda aapki teaching enjoy krta hu...
Thankyou sir ❤🎉...
Happy valentine's day 💌😊😊
Haven't started backend still im watching because of sheer interest and Hitesh sir
Acknowledging Hitesh Sir's contribution to #ChaiaurCode and backend development is crucial. Teachers of his caliber play a pivotal role in molding our learning experiences, and expressing gratitude for their guidance is essential.
Every video of yours deserves a thousand likes. Hats off to you and your efforts in making such informative videos!!! Thanks
literallly sir you are great........ i saw more than 20 videos how to connect frontend + backened, but i got error evrytime.....The way you are superior legend
really get to know how to connect backend to frontend appreciated❤❤
awesome sir, very grateful for your valuable content recently completed react and learning node js to become full stack 🙏🏻🙏🏻
Saw this video in Backend series. Keep up the good work.
Assalam O Alaikum!
Literally yeh information koi nh deta YT pe vo free m.
Your dedication and extremely useful literally compelled me to comment on your video.
Learnt alot.
Really liked it.
Keep this good work up.
Love and admirations from Pakistan.❤
It's wonderful that you recognize and appreciate Hitesh Sir's contributions to #chaiaurcode #backenddevelopment.
Hitesh sir seen your typescript bootcamp on freecourse camp then I came to know your channel loved your content completely awsome very detailed no match to your videos love from NITJ
i never thought its that easy to connect backend with frontend thank you Hitesh sir
It's wonderful that you recognize and appreciate Hitesh Sir's contributions to #chaiaurcode #backenddevelopment. Expressing gratitude to those who have positively impacted our lives is always a meaningful gesture.
what an outstanding series . easy to understand , full knowledge thank you sir
Meaning of Deep Understanding and Deep concept clearing is You Sir.....
SIR HITESH.... Salute to You....
Perfect knowledge for us to understand full stack development. Thank you brother.🙅🙅🙅🙅
i watched it in backend series .......and once again thank you sir
v nice sir... ❤❤.. thank you so much.... itni achi explanation..... mzaa aa gya
sir kya hi deep tha. literally cleared up so many doubts
Watching from backend series and totally loved it!
I watched this video 📸 in react series I learned much more in this series & thanks a lot sir to giving these courses..❤
3rd Video completed and again great great job. Thanks Proxy helps. 😀
Massive shoutout to Hitesh Sir for his incredible work on this backend series! 🙌 His teaching style is top-notch, making even the most challenging concepts digestible and fun to learn. Much gratitude for sharing your expertise and guiding us through the world of backend development! 🌟
Amazing 😂its very simple because of you sir❤🎉
loved it sir, completed 3 videos in one go
I am watching this video in react series, Your explanation way is very Awesome Sir Jee😍
O sirrrrr jindegime itna ache se nhi samjhe.... thank you sir for amezing video 🎉🎉
Thanks Sir for this amazing backend series. Your work towards providing quality education free of cost in youtube is commendable 😊😊
usually i don't suscribe tech guy but the way he explains every little concepts ,made me hit suscribe button
Backend Series me dekha, loved it!
🙌 After following the entire Javascript & React Series, I can finally say that it's actually a fantabulous series! 🚀 I did gain really valuable knowledge on professional development and core concepts. 💡 I gained so much confidence. 💪 Now I'm ready to create my own project and implement my learning. Thank you, Hitesh Choudhary Sir! 🌟 Your efforts in bringing professional content to us through 'Chai Aur Code' and also through the English Channel are truly appreciated. 👏
38:50 What if anyone with a different frontend add proxies to access my backend server? Is it a threat?
each of your videos is special because we get to know some new things that we can't get anywhere else another amazing video sir keep uploading ❤
very informative video and
Sir kamaal ka explain kia apnay statis buld walay concept ko
Thankyou so much sir for such a wonderful content .. really enjoying the series
Seeing in backend series. Thank Sir g for such quality content.
i know how to do things like you are doing. but i loved to watch your videos.
Love from Pakistan Jeee.
#chaiAurCode #backendDevelopment Your teaching Super! Thanks for breaking down complex stuff with industry-level clarity. Grateful for your hard work!
50:09 I was watching this video while doing the backend video.. tho react ka series complete nhi hua tha but still useState useEffect inn sab ka idea tha... Thank you sir , this video opened a different pov
Understood the whole video, I lacked knowledge of react so had a little bit of problem there but got the gist of it well.
The detailing in the video is what we as a student enjoy as you explain each and everything with reasons helps us alot Thanks for creating this.
So glad I came across this channel
React series me dekha, tab samjh nhi aaya tha.
Ab backend series start krne k baad firse dekha! ✅ Now it's clear
Really loved the way concepts are explained 😁
how can you be so patience hitesh sir, you amaze us...!!!!!!
all i want to do is really thank you for giving us this level of quality content and teaching and a structured way , thank you so much sir
Awesome video, reached my expectations. I wanted to know how connect frontend to backend.🔥
such a greate content with a real world example with poduction level fundamental education
teaching backend development in such an interesting way,amazing
thank sir, exiting as always the process of doing backend with this channel helps alot.
Thank you so much finally i can connect frontend to backend is success🎉❤
#ChaiAurCode super excited and pumped up to watch this series. Thanks for all your invaluable contributions to industry
This is the best channel for learning tech
thank you Hitesh sir for everything....salute to you
last : maine isse backend k series m dekha :) 😍
Amazing content loved it !
thanku sir , your course really very helpful for my coding journey 😎
Hitesh Sir you are doing great work, teaching everyone to be industry ready by introducing your course #chaiaurcode #backenddevelopment
All the best for the journey
are bhaiya maza hi aagaya aaj to itne doubts clear ho gaye kya bataye aapko
This is really very informative...
This video clear my many of many doubts
thnks sir
Thank you hitesh for your contribution to web development education. :)
thanku so much ,really useful pls keep uploading more vids
Thanks a lot sir for this great series on js backend❤
Just finished this tutorial... Mazaa aa gaya sir aaj seekh kar🤑🤑🤑
🙏😊☕️
proxy error occurs in my code:
can you please say how to resolve this issue?
Sir your dedication and expertise in teaching backend development on Chai and Code have truly been a guiding light for me on my coding journey. Your ability to explain complex concepts in such a clear and understandable manner is nothing short of inspiring.
Your passion for teaching shines through in every video, making learning an enjoyable experience. The way you break down intricate backend principles into easily digestible segments empowers beginners like me to delve into this fascinating realm of programming with confidence.
The impact you've made on countless aspiring developers, including myself, is immeasurable. Your unwavering commitment to sharing knowledge and nurturing a supportive learning community is commendable.
Thank you for being an incredible mentor and role model in the coding world. Your videos not only educate but also motivate and encourage us to push our boundaries and strive for excellence.
Keep shining, keep teaching, and keep inspiring us, Sir! Your work is making a difference in the lives of so many aspiring developers.😊😊👏👏👏👏
so you have
typing speed of 100wpm :)