Passing Data Between Frontend and Backend | Node.js
Вставка
- Опубліковано 2 лип 2024
- Learn to Code 🔥 www.smoljames.com/roadmap
Build a resume ✅ www.hyr.sh
In this beginner tutorial, I run through frontend (client-side) to backend (server) communication. We look at all the different ways to send information, such as request params, query & body, as well as how to initialize requests from the frontend, receive them in the backend, and then respond accordingly. To do so, we build a simple application in Node.js.
#frontend #backend #webdev
🔥 All my links
www.smoljames.com
📚 Chapters
00:00 Intro
00:07 Init server
04:34 Serve HTML frontend
07:41 GET routes
13:20 POST routes
🔖 Topics Covered
- Send different types of requests from the frontend
- Receiving requests in the backend
- Responding to requests (backend back to frontend)
Finally, after weeks of trying to find the answer to a simple F***ing question! Thank you my good sir!
i just wanted to let you know this was the most straight-forward video on this topic when i was learning how to code. thanks for making it. cheers mate.
Glad you found it useful and thanks for the comment :)
This video saved me on a final project haha. I went from having no clue to being able to build a working website thanks so much! I spent hours watching videos but it only clicked after watching yours. Great explanations and tutorial
Glad it helped my friend :)
A few days I looke anwered and you show me them. Thanks so much!
Thanks for the video. This helped clear up some of my confusion with client server communications.
Amazing tutorial. Very simple and straight to the point.
Legend. You've taught me a lot with such a short video. Thank you.
Glad you liked it!
Honestly the best express video out there. Thanks heaps
cheers bro - thanks for the comment :)
Thanks for this short and very informative video. It opened my eyes.
Glad you enjoyed it!
Great vid. To the point without extra fluff. I'm a c#/python dev trying to learn fullstack. Already took javascript and node/express courses. I got a bit stuck when trying to put it all together, and this is exactly what I needed.
Thank you for the great video. Now I finally understood it
Been looking all over for something like this
this was pretty bloody fantastic dude, really cemented the basic idea.
and always nice to hear the familiar kiwi accent :)
Glad you enjoyed it my friend :)
Thank you for the explanation, subscribed!
Amazing job bro!
Really well explained
I just found a gold mine of resources for learning webDev
Hope you enjoy them :)
Thanks A lot you saved me. Was having difficulty in this topic. LOVED IT.
Happy to be of service :)
This is pure gold. Thank you!
Always a pleasure!
dude, way to save a life , thanks, at college everybody just acts like you should just know this implicitly
Glad it helped friend
Amazing video, thank you.
Superb explanation. Very helpful
Thanks a lot for this, really great. I've been looking for a video like this for aaaaaageeessss. the only criticism i have is it would have been great to see all 3 screens at once.
Glad you enjoyed:) and thanks for the feedback
Such a informative video! thank you so much for making this video.
Glad you found it useful!
ty bro. you helped me. good luck!❤❤
this video helped me sooooo much, finally i understood how to do this, thank you so much!
Glad the video helped you!
This information is really necessary, I want back-end and front-end with nodejs
nice,point to point
thank you very much for that amazing tutor.
great video !!
love ya, literally saved me
Thanks bubby!! 🙏🌹
seu video me salvou!
i'm back to rewatch it, as i wanna re sharpen my backend skills ;)
Glad it's of service :)
hello from Reddit - thanks for making this.. im learning new things already 🤓
Haha I'm happy it helps :)
Its very helpful...Thank You
More than welcome!
I didn't get why the "prest text 🐝" was not printed at the first try when the url was at the home page route "/" , but then after changing both of the routes on the srever and on the fron-end script to "/info" it appears ? at the first and second requests the route was the same so why ?
Hi Smoljames, thanks for your video and your ability to be really clear in teaching stuff, I found it truly helpful. As a beginner in javascript programming language itself, I find it a little too advanced for me, even though somehow intuitive. Would you mind recommending which of your video to follow along in order to have an in-depth understanding of all the statements and steps here illustrated? Thank you in advance.
Hello hello - thanks for your comment! I'm glad you found the video useful. If you're looking to continue with nodejs then I would recommend watching my nodejs crash course that I recently uploaded :) hope the helps
nice
This is great, thank you very much, it would be really nice if you could make a tutorial as clear as this about how to retrieve data and how to write in a database(Sql) using nodejs. Maybe the whole process frontend->backend->database -->backend -->frontend
I would be happy to do that
@@Smoljames I will stay tuned
Thank you! This was very helpful. Also, how would you deploy the localhost backend when you host the website?
On aws amplify :P
You also saved me! Thanks a lot! But for dynamic pages is it possible to use html without a template engine?
glad it helps :) it absolutely is - there is two methods. One, save to local storage from main page and then access that local storage material of the dynamic route. Two, client side render the content by fetching JSON information from the server, and then populate the document with that using javascript & the DOM.
Does it save the posted value after refreshing or closing the page?
Sir , is this an example of client side rendering?
I love you bro, I wasn't able to send a post request from client to server, I was about to kill my self, THANK YOU
haha cheers for the comment :) glad it helped you!
Thank you for this great video! But could you pls use a darker background? It's really hard to see e.g. the yellow brackets.
Happy you enjoyed :) and yep I absolutely can. Thanks for the feedback
Thank you mate. Is there a way to add an api key to the post request on server.js? I don’t want my key to be exposed ?
There absolutely is - I think the npm package called 'dotenv' is what you're looking for :) let me know if that works for you
@@Smoljames Yep. I used dotenv and it worked. Thanks again mate. Brilliant content and explanation.
Please code in dark mode. All in all it was great
Awsome video. Although i Copied the Code line by liby I can not POST I get a (Bad Request) error, and an undefined error on my console...
Hey dude - sorry for my slow reply. I made a discord where you can post screenshots of your errors and stuff so feel free to post a bit more of a detailed error log in there and I can take a look. hope that helps :)
@@Smoljames Hey dude, I have figured it out. Your code works perfectly. It was an environment problem. Still Thanks for taking the Time to reply! 🙌
@@MikeTsak what was your environment problem? I have the same issue!
@@tompryor349 Did you figure it out?
@@AB-kq9xm no, not yet. My friend got it working for me but he rewrote some of it. I was quite happy following and understanding this tutorial, I just couldn’t get it to work
A little bit weird seeing you coding on a bright background but your tutorial is great.
Haha glad you enjoyed the video and don't worry I've switched to dark themes
Hi James, I love the content and it seems to have everything I’ve been looking for.
However, when I enter npm run dev, I receive the following error.
Error: listen EADDRINUSE: address already in use :::8383
Glad you're enjoying the content :) hard to immediately say what the issue is but if you post a screenshot in the discord server linked in my bio I can take a proper look and give you my thoughts :)
Brilliant, I’ll do that in about an hour. Can’t believe you replied so soon. I also find it strange you only have about 800 subscribers. I thought it would be at least 50k, because the way you teach really is totally spot on
@@thomasmagner5200 haha thanks dude appreciate the compliment - hopefully we'll get there some day
@@Smoljames Well, I will say, the part that really grabbed me was you saying, let me know your challenges, and I'll create a solution, more or less those words (at the end of the video). I've seen loads of people make a big speech about uploading a new video every week. That in my opinion is almost like sahying nothing. It may be reassuring that you'll be around in the future, but it says nothing toward solving a problem someone has right now.
You seem happy about helping people with immeidiate challenges, so if my opinion is of any help, that's what I'd be focusing on, rather than saying you release a video every week
Oh here we go, I might have it working. i changed the port number from 8383 to 8386 and I'm not receiving the crash error. So, maybe I'm good to go. I am still a bit new to this, so forgive me for not attempting that earlier :D
I dont get it. You have frontend on your server? Isnt it supposed to be separated to commonly have two different devs to develop it? How people gonna merge this? I thought its the whole idea about front and backend dev to seperate it?
This is a more first principles demonstration. Whenever you deploy your frontend code, it ends up being a server system just like the one I have developed here that serves your frontend code. Every website in the world is served up by a server, which is exactly what this is. And the served website is known as the frontend, and the code that serves it is the backend. The code is still separate, as the html file in the public folder handles the javascript and the server.js file handles the server logic. The point of the video is to demonstrate how you can communicate between the frontend using javascript in the browser, to the Express + Node server that we have as the backend and runs on the server. You can apply this concept exactly to a different frontend / backend setup as you like, say if you had a React frontend and a Django backend.
Hello plz zoom in i cannot understand why so many video online and we can't even see the text too small zoomed out
Lisa thank you
@Smoljames Hi , I have created a project Classroom availability checker..that will check the availability of the classroom whether it is free or occupied by using data in the database..Explain me how to Retrieve the data from the backend and use it on the javascript of my live website and display the output according to input...
I have published my website classroom availability checker...by using html css and Javascript..In that I have added the classroom data in the frontend (javascript)..Now the problem is I have used my data in javascript, which is visible to everyone..they can see the data by viewing the source code ...it will affect the data privacy..so I decided to create a database in the back-end and retrieve the data to Front-end..for my website...Can you please explain me how it can be solved or Can you please make a video for that
Can't see your screen...like at all...
haha good thing I've changed my editor theme