Building web server with node and bun

hey there everyone my name is Ates and welcome to the backend series you're watching a series where we are going to go ahead and learn about the backend development it's going to be really fun and in this video we'll understand some of the concepts as well as we'll be writing code again the expectation I repeat it you should know the basics of JavaScript and that's it rest of all the things I'm going to cover in this series itself and just like always we do have a common Target just keep me motivated uh for this video and of course it feels really really good so we won't be keeping it too high just 200 comments I think we can achieve it within 24 hours uh please please go ahead do that if you have no idea what to write in the comment section go ahead and write I'm waiting for the next video so what we're going to do is first let's understand a little bit of the architecture and discuss about this so whenever you are building any backend application this is what you actually try to design and what you see on the right side in the green box this is what we are here to build now what happens is we want to understand the web servers client architecture the client and the server that's it this whole thing is known as the client the client is having a part here where we are having the web server here and the client part could be a web browser it could be a mobile app so whenever you request any website or you make or you press a button on the mobile app the mobile app in itself doesn't do much yes it does but not that much of uh intense of the data intensive task what it does it makes a request to the web server and the web server further makes a request on the database now depends on your goal maybe you want to save some data maybe you want to retrieve some data maybe want to update some data or delete some data whatever you wish to do on the server this architecture is common whether you are building High scalable apps like Facebook or Shopify or just a simple to-do app this is how the architecture looks like in this video we're going to talk just about the web server not about the database part we'll come back onto this one we'll deeply discuss this one now this web server it used to be days when this was very clear that you can either build that into some of the net Frameworks or PHP or something like that but things are changing now it's really a whole lot of jungle of what to choose as your text tag to build this web server this reminds me what is a web server in the first place it sounds like that server it might be a big name you might be having some of your racks and some of the CPUs and gpus and it no that's not that's not how the web server look like a server is just a piece of software whose Duty is just to serve that's it that's your web server so we'll write a piece of code that will be able to respond to the request so whatever the request you make from the web browser or a mobile app our server will be able to respond to that now since with this series you have already picked up JavaScript as your programming language but it's not really clear that hey okay we have chosen the JavaScript but JavaScript is a browser language yes of course you are 100% correct there but these days not these days almost it's almost like a decade now less than a decade that we have actually stripped off the engine which runs the JavaScript from the browser and we have made it as a standalone software some of these software you already know so these softwares a very popular one node.js another one these days getting very popular known as bun so why do we have so many choices choices are always good in the software world so I know that I'll be choosing JavaScript as my programming language but as the modern days progress it's really difficult to find in ourself in the position should I learn nodejs next and then start the backend series and these days I'm hearing about the bun as well should I learn the bun first and then come up here the answer is no you don't learn nodejs like that or you don't learn burn like bun like that whenever you need something specific to be done or you want to understand the architecture behind the node or the bun then you go ahead and explore these things otherwise rest of things you learn on the go in this video I'll walk you through that how you can utilize bun as well as node JS and we can write softwares in both of them in fact we're going to do the same in the next couple of seconds in couple of minutes in this video so let's go ahead and talk about that so we have chosen JavaScript as our framework and I highly recommend you to go ahead and install node node is easily available for Mac windows and Linux and feel free to uh pick up your uh operating system Mac Windows Linux feel free to install it similarly bun is also available for Linux Mac and windows all the popular operating systems are there I have already installed called them and now my job is simply to create a web server and show you uh what is the potential of these core uh runtime environments node is also a runtime environment bun is also a runtime environment and allow them to just run my web server can we do that of course let's go ahead and do that so we're going to be writing a little bit of the code together don't get overwhelmed this is how we want to start get our feet wet discuss about it nothing to be worried about I'll open up my uh terminal here not terminal entire vs Cod code and with this vs code the first thing that I would like to do is drag and drop a folder here my folder name is backend so that we can keep all of the files at the same place I'll go ahead and create a new folder into this one so that we can keep everything in place I'll call this one as 01 and let's call this one as web server and there is no such hard and fast rule that you have to pick it as underscores or anything just I'm just organizing them things a little bit better the first thing the obvious thing that to do is create a new file and let's call this one as server because I want to build a server but first i'm going to get started with the server of the node so I'll just go ahead and say node server D node and. js before I go ahead and do that I would like to walk you through that yes I do have node installed but I don't remember the exact command of how to find that whether node is installed on my system or not so I'll give you a small trick for that you can go ahead and use node as a command because that's installed and then there are always couple of options that you can go for like D- version is usually the one that we go ahead and hit and it works so I have a node version little bit older version but if you have any version this whole thing will work as it is there is no such big deal so I have node installed I can run my entire JavaScript files with the node itself I don't have to copy paste in the browser I can just use it as a server as a standalone file when we go ahead and work on with this uh node environment you'll find that inside the docks of it uh there's so much of the documentation in fact if you scoll a little bit inside the HTTP you'll find that hey you can do so much with this you can handle the request you can have the HTTP server and whatnot uh there's so much to to discuss about it and work with that right now we won't be doing that just follow me along first and foremost I'm going to go ahead and create an HTTP I cannot create it out of thiner so I'm going to go ahead and create use a require statement and this require is going to require a basic mode node application not mode HTTP this is out of the box given to you by the node itself you don't have to install it or anything like that let's declare a couple of variables so that we can make ourself a little bit easier so we'll have a host name this is your Local Host our Local Host is pretty simple we have 127.0.0.1 this is Local Host this is your machine so that I can just run my web server on my own machine I also need Port we have a lot of port in our computer these are just like a Gateway uh or you can say just the gate and feel free to pick the most common ones are 8,000 3,000 so we have to pick something like that we cannot pick something like 80 or 443 uh you can read more about the ports which are freely available in your system there a lot of them I guess if I last time checked remember probably like 63,000 or 65,000 don't remember exactly that I don't use that now how can we go ahead and now create a server now creating a server is pretty easy you can now use this HTTP which you created at the line number one and that has a lot of options one of them is create server we can go ahead and use this server I would like to hold this instance the whole uh thing into a variable so I'm going to go ahead and call this one as server now I have HTTP server This Server if you'll just hover on to this one this takes a call back here that hey I'm going to go ahead and work uh just like this the very first thing is to design a simple call back so here we go this is my call back the first thing you have to worry about is request and then since you'll also be sending some of the data back we call this as response we usually Shand notations wreck and rest but feel free to use request and response entirely no problem there now I can go ahead and just write a simple statement here that what do you want to do I want to Simply go ahead and the few common things that you have to almost always do is I have to respond so how do I respond first thing is we go ahead and say status code if everything is all good we usually send a response of 200 now I know this is too much for you as of now that why we are sending the status CES why can't we just send a simple message back that hey this is all we done remember we are learning all about the good practices industry standard practices so I want to give you a taste of it right from the beginning so don't feel overwhelmed I'll walk you through once you watch it that hey these are all the things I need to take care you'll be right at home so don't worry about that part so we are sending back a status code after that we sometimes even send the headers back so we have option of set header as you can see I don't remember all of these things these are very standard not many of them there are only three or four of them so when I once I have this one what you usually send back is this one content-type and no I don't always remember that uh I have written it enough of the time that I now remember it otherwise it used to be notes so I will just send back a simple text which will be a plain text and yes in case you wondering you can send HTTP response as HTML uh Json whole lot of other things now it comes that uh what do you want to send I want to send a response but after sending this response I want to end the response I don't want to keep on sending the data I want to end this and I would love to end it with my favorite hello this time iy this is really really hot in India right now and I want to send back an IC all right this looks good and this is all what we need but no we are not done you have written what server needs to respond but you haven't mentioned that how the server should listen so in this case uh we'll use server and there's a method here that says hey I would love to listen you listen via two things actually three things the first is where do you want to listen there is a port available for it there's also a host name that this is where you want to listen and then finally a call back this is just for us not for the users I'll just go ahead and throw a simple call back and I'll just say hey uh console log and let's just use a backtick and we are going to go ahead and say server is listening at HTTP no we are not on the https as of now uh let's use H like this and we'll say host name separated by colon another variable injection and this time we'll go ahead and say Port all right this looks nice if I haven't made any typo and we haven't made any uh kind of a uh this thing typo or something then probably we should be good let's try to run this the very first server that we have built on our own we'll just go ahead and say node and we'll say server I cannot say it like that I have to go inside the directory server and there we go it says nothing it just says server is listening at this uh this location now just go ahead and copy this go back up here and we'll be using Postman for all of our testing uh we don't do testing like hey just open it in the browser no from the day one we'll be going with the production grade as of now let's just go ahead and hit on the new I want to make an HTTP request and ignore all these things on the left side I work on other projects and that's from where they are just go ahead and copy paste so you are on to this request you send a get request and I go ahead and and say send and it says hello I pretty good progress pretty good progress but there are couple of issues with this one now notice here if I go ahead and say Hey I want to do a login and it goes there and says hello I okay nice if I go ahead and say hey let's just go ahead and register a new user all right send it hello I see I'm a big fan of I but doesn't means I want to throw back I on every single URL when you visit at Twitter and you say at the hit.com you should be seeing my profile not just this heisty so we need to modify this code and we don't need too much of knowledge to modify this code just simple if and else will do the job but we need to do this this cannot alone work so what we're going to do is we're going to just go ahead and cut this and here's a shortcut trick you don't even have to cut this you can just select all of this and start writing if and select this and automatically vs code plays all of these things inside the if block that's pretty nice now what we want to do now is we want to evaluate what request is coming in and at what URL the request is coming in for that I have another object which is request and I can go ahead and ask it that hey just give me a URL now once I have the access of this URL I can verify that whether that was a slash request or not or was it some other request and based on this I can go ahead and send a response H sounds good now I can just go ahead and copy all of this and I can write another condition here so I'll just go ahead and have this and paste it now I'll check for the another condition that hey how does it look like probably I have added too much if else here paste this that's nice okay this time I want to say that if somebody request for an ice-ht then only give him a what IC variant you would like to choose or we'll just send a response that uh something like the thanks for ordering IC it's really hot and we're going to just say it's really hot I'll avoid the codes and everything as of now but what about if somebody doesn't request any of this in that case I can just have my final else part and I can just uh paste this whole stuff like that copy that and paste it and in this case I would love to send a response of everybody's favorite I'm pretty sure you have heard about it 404 pretty cool and we'll set the header just like this and I'm going to go ahead and say not like this but we'll send up a 404 not found oops found all right so now that this is little bit better of a code yes we have added a little more but it was just if and else nothing more than that so now the server is ready to serve and only thing only problem with us we have modified our code this is older version of compiled code it doesn't know I have made those changes so I have to stop the server start it again yes you have to do it every single time you made even a comma change you have to do it now let's go back on the postman and say hey if I go ahead and hit a register route again uh it says not found Ah that's good that's good this is how you should be responding to me login and it says not found if I go ahead and remove everything it says hello I and if I go ahead and hit a route of Ice-T I can go ahead and say thanks for ordering IC te so as you saw this is much better but hey talking about the developer experience we killed it now imagine if your application have like just few 20 30 routes how how you're going to manage this and don't say that you will be using switch case because that's even even much bigger of a nightmare when we have like 50 of these routes we definitely need a little bit of a better user experience this surely does the job but we need alternate solution and we will have we will have surely but right now this is all what we want to do as of now but as I said that it's not just about building the application through the JavaScript and node all the time we have other options now in front of us we do have bun so which one would you like to go for and yes I know what you're thinking right now you might be thinking that hey I want to choose the latest of the tech I want to go with the bun I've heard it's faster they put these charts as well that hey it's faster so I have already installed bun on my system you can go ahead and do that and can we build the exact same application in the bun as well of course you can of course you can can now let's go ahead and create that as well and we'll see the difference between the code of both of them it will help us to give so much of the clarity about how things needs to be done let's go ahead and create a not uh new file and we're going to call this one as server db. JS and let's see how we can design a core server in the bun it's actually super easy and much more easier than you think Fromm so we can go ahead and import with the curly braces and we have to import a serve not the server serve because server serves and this time we have to import it from the bun so quotes and Bun there we go now once we have this bun has its own way of serving the things and giving you the response and all these things it's little bit easier compact but hey we have to do it so then we have to Simply go ahead and say serve and that's it it serves it out of the box but hey it doesn't know where to look for how to look for and all of these things so the first thing we are going to do is provide an object to it in this one the very first thing that you do is use a method inside the fetch uh and then go ahead and pass a request onto this one and now you might be wondering where is this request and all these things are coming up from I don't have them bun gives you that you don't have it bun gives you that so once I have this fetch as a method in this further I have to fetch the URL otherwise it will respond all the time to everyone hello world hello iy hello something like that I want to respond based on what URL is coming in so let's go ahead and do that I will require a URL how you get the URL you can go ahead and use new and this URL this URL again given to you by the bun itself and in this I can use the request. URL method once you have this this will give you a URL a proper URL and through which you can actually destructure the URL you want to know about the HTTP or https you can find this you want to know on what port you are running you can find that if you're running any similarly you can find find the PATH name as well let's go ahead and try that I'll go ahead and simple write a simple if case and I'll say that hey URL as soon as you put a dot so many options for you like you can find the host name you have origin protocol whatnot similar to that there is one known as path name through which you can get the final last part of that and if that is equals to A simple slash I want to return some response the way how you return the response in the bun is little different from the node itself so we're going to go ahead and say return and we'll craft a new response response there we go and in the response you simply write what do you want to run so I'll just go ahead and say hello it's I I love that uh and then optionally you can return a status as well so we have a status and I can return a status of 200 we won't worry too much about the content type and header type and all of that as of now surely we can do that but I think this is already good enough now let's go ahead and simply uh just copy this so I'll just go ahead and copy this part copy that and now let's go ahead and simply have an else and paste it up here now obviously we want to go with the different URL this time not like the slash we'll go same URL Ice-T but this time we'll run this server not the previous one and this one will give a different response that uh something like this Ice T is a good option it's always a good option status 200 good enough for me now in the else case I'll go ahead and simply write that if nothing matches then then we'll simply go ahead and return another response so new response there we go and what do you want to send as a response I would love to send a 404 and not found not found uh you can send a status as well uh let's go ahead and throw a status of 404 all right uh this is good enough now what's extra is remaining that you have done all of this whole thing about the server response and all of this this fetch method is all done once this whole fetch method is done then put up a comma and hit an enter this is where you might make an accidental mistake so go ahead and uh shrink this fetch so that you know what exactly you are doing and after this you can mention the port we'll hardcode this port not from the variable at this moment we'll definitely see the best practices in the next video but I can just go ahead and say Hey I want to serve on 3,000 what's going to be my host name as of now I'm just serving on the classic which is 127.0.0.1 this is my local host and that's it that's all what we need no listening nothing serve does all of this behind the scenes so this is my whole code looks very compact looks very newish and hey let's see if it works and now uh there's a difference of how we run this application we have to use bun because that's what we need I can just go ahead and say bun and then I can say 01 and let's just say if I can restart this entirely and we'll just say bun we'll first go inside 01 no suggestions there don't know why let just check in LS probably we need to go inside the file and now let's see bun cannot go in folders that's strange anyways we'll just go ahead and server db. JS it doesn't say anything because we never asked it to say anything but let's just see if we can hit a web request on the slash so let's just remove everything and just hit the web request same port everything if I go ahead it says hello I what does it say when I go ahead and say I as a URL I go ahead and say Ice-T hit that and it says IC T is a good option so we can see we can build our web servers in both bun and nodejs now here's the interesting thing why I have done all of this now let's just say say you are a big fan of bun but when you are deploying this application the the supporting operating system actually has node installed in it can we run or can we use node to run this bun server application is same but if I go ahead and do this there we go errors it doesn't know what you are importing from where this serve is coming up because they are completely different of an ecosystem same goes for the other one as well you cannot just go ahead and say no node and I want to run the server the bun side of it it no it doesn't know so they don't know about each other they cannot talk to each other so although you might be a big fan of what the bun is doing but you need to know that when you are deploying your application which is most supported where you can deploy it either it's your own VPS your own machines digital ocean AWS what is there so this is the difference between them most modern doesn't means you it is ready for the day one production it is not as of now the most supported uh runtime environment of JavaScript is node and yes once you understand the basics and everything behind it you will be able to transfer this knowledge into bun into any other Frameworks so now that we know that yes we know that we can create a web server respond to a certain request and all of that but hey look at the developer experience even on the bun side I don't want to write this code for 20 routes and then check the login I hope you can imagine if I have to make a a server request get the response oh man that is going to be nightmare this is not scalable this is is not modular this code is a nightmare don't want to use that in any case at all so now the goal is to introduce some of the helper things people are really really kind in the coding community and they have given us so many libraries so many Frameworks that improves our developer experience does exactly the same things almost exactly behind the scene but they adds a little bit of the performance a little bit of the error checkings help us to design better softwares and that's what we are going to do in the next video we'll see that how a couple of more Frameworks are available there a lot of them are available definitely I'll introduce you to just more than Express not just Express but we'll be aggressively using Express throughout this one now that you understand why things are required what they are used for and we have even written some of the code as well tried and tested it out using the postman like professionals I hope this actually gives you a sense that yes we are onto a good start and we want to really really go in depth about the backend I'll introduce you what all the framework choices are available we'll bring L touch upon them and we'll have some fun on that and then through that we'll start building our application I'll show you even the glimpse of how to host them what to take care and whatnot I hope you are enjoying this series if it was super engaging for you leave down the comment as well if you don't know what to comment just uh send I'm waiting for the next video that's my motivation to make the next video that's it let's go ahead and catch up in the next video

Channel: Hitesh Choudhary

Views: 21,160

Keywords: Programming, javascript, devops, cloud, aws, reactjs, nextjs, MERN, coding interviews, nodejs, bun, web server, postman

Id: apuAWXMT-9c

Length: 25min 22sec (1522 seconds)

Published: Fri May 10 2024