Node.js Tutorial For Beginners | Node JS Crash Course

damn a tari tari damn Oh tari tari dumb being a binga-boinga in the mountainous hey there my gorgeous people on the Internet in this episode we are gonna cover nodejs now everything we did on this channel so far was visual front-end code things moving animating colors and everything however nodejs is a bit more mysterious okay you cannot see it but it's there and it's powerful now before we get into it I want to thank study web development comm for sponsoring this video if you ever wanted to start your own business as a freelancer study web development comm offers you a complete bundle to help you grow your own freelancing business from scratch there 140 page ebook will teach you how to sell your services how to get paid more money and how to market yourself as a developer this bundle also includes website templates client proposal templates invoicing templates and more check the link in the description if you use the coupon code dev ed you can get 20% of the current price so thank you again to study web development comm for sponsoring this video okay before we get going let me quickly explain what nodejs is because there's a lot of misconceptions out there some people think it's a framework some people think it's programming language but it's neither of those all no js' is is just a JavaScript runtime now that sounds fancy but it's not all it basically means is that we can run JavaScript outside of the browser because so far what we've done is we've only worked with javascript in the browser so we could do Dom manipulation and things of that sort but with JavaScript outside of the browser's were using node we can do things on our computer now so things like accessing files reading writing files creating a server and connecting to a database and things like that so that's what we can deal with node and JavaScript outside of the browser all you have to remember is that we're working with JavaScript okay that's all it is on our computer so let's download this sucker and all we have to do is go to no js' dot org and we can click on the recommended for most users that's gonna be just enough for us the version might change by the time you're watching this video but hope you're watching it now so anyway let's go into our vs go so after you install it we can go up here to the terminal I just created a file here called node crash course so super fine okay we can open up this terminal here and we can check if note is installed so all we have to do is write note dash dash version like so hit enter and you're gonna see that we have version our version displayed here okay and what we also get with node is something called NPM which I'm gonna get into a bit later so we can also check that by writing NPM - - version hit enter and there we go you have two version there as well perfect so what can we do in node and what we cannot do in know it so for now let's just create a file here and typically you're gonna see it named either a DJ s index DJ s is okay these are probably the most common ones we're gonna create this one I'm gonna call it AB dot J s cos why not I'm gonna leave this terminal open because we can use it so I told you that we are just working with JavaScript here so technically I can do this I'm gonna console.log v + v and this should work now we cannot open this in the browser remember we're now working with the browser anymore so how can we run this code well you know we installed node and we checked it out by writing no - - version well if we want to run any commands so we can run files we can just say node so this is the initial code that you write here in the terminal and after you write node you can specify the file name you wanna execute it you want to run so all we have to do is write node and the file name app ok we don't even have to say fjs app is enough it's automatically gonna know hit enter and take a look right there it's gonna say 10 AHA amazing so as you can see here we can just write normal JavaScript okay but there are a few differences with the browser based and here and nodejs so in the browser before you run your javascript code would something gets created so let me just say browser Jes here I'm gonna make this a bit bigger so you can see I'm gonna lower this down a bit so and the browser here what we have when we run our JavaScript before we run our JavaScript code is this big when the object gets created and all this window object is it just holds a bunch of different methods on top of it things that you might use like document or even variables that you create gets appended this big big window object so for example you might use something like document the query selector to get an element and with the class of nav open or something like that well this document actually lives on that big window object so you can access it like this window the document a query selector but we don't do that because before our code actually runs the compiler is gonna prepend this window on top of it so everything even console dialogue even these are on top of this window object okay even if you create a variable Const that same name equals def Edie and this is also gonna live here and also if we create a function same name it's gonna be equal to M just gonna create an arrow function here like so I'm gonna console.log name here this function is also gonna live on the window object same name so we can access it like so but again this is kind of redundant to write because it's automatically gonna know that's that it's on the window object so we don't have to write that anywhere even with the console log or document a query selector okay it's gonna know that it lives on that window object so that's very cool but in noce yes we don't have that so let me believe this we're gonna write node we have something called modules here and all that means is that each file if you create a function or a variable only lives in that file so if I create the cost name here equals to dev edie all right this name only lives in this file and the reason why that is is because there's something called a module wrapper and all that is is all of our code let me just copy this really fast here every time we create a file in a node it's basically wrapped in this function here okay so everything is only available in here and we get access to a few different things something called exports require module file name and their name that we have access to okay so what we can also do is we can export different things so what normal you would see is again you cannot see this this is kind of living behind the scenes but either I just want you to know that when we're gonna use these exports require and file name and their name is that every time we we run a GS file it's actually wrapped around this function here that nodejs gives us ok so let me just delete this hit save and let's just create a new file here so I can create a same name file J yes and I can create a function just a very very simple function let me say Const same name it's gonna be equal to an arrow function here that's just gonna console.log hello there edie okay and now we can actually export this and import it in our abs a yes and again that's something you're gonna see a lot you're gonna see that we're gonna have a ton of files here and then you just kind of put everything together in this big app.js file so this is the only file that we're gonna run so we don't have to run separate files down here by writing nodes say named rjs and all the other ones we just run node app and everything else is gonna be connected in here so we just import everything in this app dot j as file so how do we import it well first we have to export this file so let's go down here and remember that all of our code is actually wrapped into that module wrapper so we have access to a parameter they're called module so we can just name module dot exports and set this equal to whatever we want to export in this case is same name function perfect hit save and that's all we have to do now back in a BAS we can just import that by creating a variable so I'm just gonna say Const I'm gonna give it the same same name which is same name that's gonna require that's also something that we had in that wrapper the module wrapper and we can require that specific file so I can just navigate what a dot and a slash to say name perfect and now I can just call this function here so now hit save I can just call it down here I can just say node app dot J s hit enter and take a look right there we get hello there add in the terminal perfect very very nice all you have to remember is that each file that we create is a module that we can export or import perfect another thing that I want to show you is that we can export multiple things from here so let's say I have two functions okay let's say we have a say name and let's say we still have a say address or something okay let's set this equal to I'm gonna console.log and I'm gonna say Johnson Street that's that's a legit straight okay how can I export these two now well rather than saying module exports same name we can append the function on top of this export so all you have to do is in module exports and you can add a dot say name here and set that equal to say name and now we can say module dot exports dot say address equals to say address perfect so now we don't get back the function here anymore we actually get back an object so if we console.log say name now which is actually not a good name because we expert we're exporting same name and say address but let's just save this I'm gonna rename this in a bit if I run nodejs app again look at that we are getting back a object with both of our functions so now same name doesn't really make any sense here to import the same name so I'm gonna rename this to get user info and here if I say get user info we are gonna get the same thing note AB that is perfect we're getting back the user info and now if I want to access a function I can just delete this let's say get user info dot and look at that we have say address and say name so say name and we can just invoke the function hit save let's take a look again and there we go we get the message the thing we also have let's go back to this module wrapper we also have access to something called file name and their name so let's console.log those out console.log let's do to our name so underscore underscore our name and if we run this so let's go back and run note app dot j as here if we hit enter it's just gonna give us back the directory all the way from our see here as you can see here so it gives us back the whole whole path we can also get the file name of this app that is by writing underscore underscore file name so these are a few things that we might need in the future if we're gonna hit enter here and we can actually just prepend this with some backpacks here and I'm gonna say file name and we can append this file name here so it's a bit more visible so note fjs and as you can see the file name is gonna be all the way from our root project all the way here to my face and it's gonna say app dot j s perfect so now that we created our own modules let's take a look at some modules that are actually pre-built in to nodejs so we don't have to install anything we can use these straight out of the box so we can create a new file I'm gonna create a new file for each one of them the first one is gonna be called path path Jes okay and we can import path by writing cons path so I create a new variable and I can require half like so and again I don't need to find an actual file here I don't need to navigate anywhere because this is again pre-packed with no js' okay so let's take a look at what the path whoops let me close that up let's see what the path can do for us so the path is basically going to help us combine different paths if I want to access a specific path or I want the name of it or maybe the extension of a specific file we can use the path module for that so for now let's give it a shot I can get the file location or maybe the base name of the file let's just do file location for now and I can set this equal to path and we have a method here called join and I can join multiple paths together so let's say I want the directory name that we just saw which is gonna give us our path all the way in this project and now I can just append a file to it so maybe I want AB dot J s hit save and let's console.log this file so console.log file location there we go and let's take a look now I'm not gonna run note fjs anymore I can run node path dot J s hit enter and there we go look at that line we get the full line all the way to AB dot J s so we just give the directory name which stops here before the D crash horse and it's automatically gonna prevent this ab dot J is on top of it a pen not Pripet ok so that's one we can use let's also take a look to keep opening the space so - var closed we can also get the base name of the file so we can get that so now that we have the full path to our AB KS we can also use something called filename is gonna be equal to I'm just gonna create a variable path dog based name okay and here I can just give it the file location and now if I run the code again so let's just cancel out file name now file name hit save and let's take a look here let's run notepad say yes again and take a look there we are gonna get AB dot J s so we can just get the simple file name if we want like that as well so again there are a lot of different cool methods here on top of this path you can get base name directory in your name and format things you can join them together the way we did up here we can parse things resolve and a lot of different different cool stuff we can get the ext name let's also try that so ext name and we're gonna just pass the file name in here and let's console.log this I'm gonna create a a name here file ext equal to this console log file e XD hit save let's console.log this as well and as you can see we get dodgy s there so every time you want to work with files and paths or you want extensions or things like that just remember you can always use this path module perfect so that's one and the next one we are going to talk about is called the URL module so let's create another file here and we're gonna call it URL j s and this is used if you want to work with the URL so we can import that just by saying cost URL require URL so same way we did with the path yep and let's I'm just gonna copy an address here let me copy and paste this because this is a pretty decent example so I can create a fake address here at cons and ress and there we go just HTTP localhost 8080 and just kind of some parameters in here okay so that's just a random address now we can take this address I can parse it and I can pull out any information I want from it so maybe I just want this first part so the D host okay or maybe I want the path name or something so that would be like default HTML or maybe just queries passed in here so I can manipulate this and pull out any information I want from it with this URL module here so the first thing you do is you need to parse this address so you can work with it so I'm just gonna create a variable here called parsed URL okay and all you do is you get this module that you imported from nodejs URL and then all you do is you parse it and then you give it the the address so I'm gonna give it the address here you could have copied pasted this in here but whatever and we're just gonna say true okay and now we can work with this any way we want so let me just console.log a few things we can deal with this we can say parsed URL think so and maybe I just want the host so this part of the web site or let's say I have David comm slash user slash blah blah blah so that would just pull out david calm so parsed URL dot host okay hit save let's take a look and now we need to run node and URL okay hit save let's take a look there and as you can see I just get localhost 8080 so I can pull out only the host let's also pull out like the default HTML from here as well so I'm gonna copy paste this again and rather than doing host I'm gonna do let's see where it is oops there we go path name so if we do path name let's take a look again and take a look at there we get default dot HTML we can also pull out the query from here by the same query so let me copy paste this again paste it in here and we can change this to query which is actually gonna return us an object that we work with so know the URL and there we go you can see we get back an object with the year and the month and it's nicely formatted and we can again access this like so by adding another dot here and same month if we want and that's just gonna pull out the month there we go February so we can use the URL module to work what URLs obviously what do you is the URL module for I don't know maybe to work with the URL okay that's the second one the third one I'm gonna quickly go through is something called the F the FS which refers to the file system so with this you can create files you can read files and things of that sort so let's create another file I'm gonna call this f SJ s perfect let's open it up let's open that never mind okay and we can import that as well we can just say Const FS equals to require FS perfect now let's just create a file here let's do FS and we can do right file oops like so and this actually takes three arguments the first one is gonna be the name of the file I'm just gonna say message dot txt the second is gonna be the value so I'm just gonna say hello they are note and the third one is gonna be a callback function so you can either do function like so or you can do an arrow function like so whatever you prefer I like arrow functions because they are they are awesome okay and we also get back here is we get back something called an error parameter and we can just check just in case this fails for some reason we can just display the error message or we can handle it any way we want for now I'm I'm gonna do is just say if we have an error I'm gonna throw an error okay that's it and down here what we can do is just let's just cancel log file has been written okay now the before I run this this is pretty important what this does is it's actually an asynchronous function here okay and what's happening here is let's see I just have console.log hello or something down here well imagine that this writing writing this file might take a very very long time imagine that you are writing a 500 megabyte file okay maybe you're uploading somewhere and you have to write that file to your server so this takes a long time and what's happening here is that this is a pretty important concept and note something called the event loop and what's happening is that this code will not be blocked we can continue serving other users or continue running the code down here without our whole application blocking until this file gets uploaded so you can just kinda Majan that in simplest of terms is that note takes this operation okay of uploading a file and it heads down somewhere else and it continues to do work okay and once the file is finished it comes back and it serves the file so you can imagine going to restaurant or something the waiter is not gonna go to this like the waiter is gonna go take an order and it's gonna go to the chef to make the order she's not gonna wait there for like 20 minutes she's like okay now the order is done and I'm gonna serve it to the first person no she's gonna go take an order bring it to the cook and then go take the next order that's kind of the same thing that's happening with Note and whenever D D file is ready it's just gonna go and take it and serve it to the user note FS and there we go look at that we have created a file hello there node perfect let's also take a look on how we can read this file and for that I'm just gonna console.log this out and down here we can see fast read file and we can just give the path to message dot text here second part we're gonna have to add here is the encoding which is gonna be utf-8 okay and the third argument is again gonna be that callback so this is what is gonna get returned after the file is successfully read and here we get access to that error again but we also get access to the data that we're getting back from the file so again we can check if error throw an error here and then I can just cancel out the beta whenever it's ready so let's take a look all we have to do is just say note FS there we go look at that I misspelled this will so here's an error but if we run note FS again we get hello there note and I can add more text here and it's gonna work I'm gonna hit save and let's read it again so there we go hello there is sound there we go so that's the FS module but the last module and probably the most important one that we're gonna work with is called the HTTP module so let's take a look at that we're gonna say HTTP dot J is here and I'm just gonna import cons - TP p equals require HTTP and this is gonna allow us to create a server perfect so how can we create a server well we're gonna say cons server is equal to and what we get in this module here is something called create server there we go and this is a function that actually takes a call back so we can add a call back here we can just run an arrow function or you can run a normal function and here we can access to something called request and response which I'm going to explain in just a bit okay so after we create that server we can listen to requests that are made to our server so to do that I'm just gonna say server dal listen and here we can define a port that we want to listen to so for now I'm just gonna say 3000 okay and now when we go in our browser to localhost 3000 well we are making a request to that server so again so that's the first thing here and a response here what it is is how we are responding back to the user basically again so the response is what we give to the user and request is what we get from the user so for now what we can do is hey when the someone accesses the localhost 3000 we can write something back so we can respond in a way so I'm gonna say response here dot and I can write a message here I can just say hello there user and at the end what you want to do is you wanna close up that response so you have to do this every time you can say rest dot and and that's gonna close up and that's all you have to do and here what we can also do to see we can also add a callback function to this listen to see that this server actually starts up so I'm just gonna add an arrow function here I'm just gonna add a console lock here that says server is up and running okay just a simple message here and running okay hit save and let's take a look I can run node HTTP hit enter and take a look there we're getting server is up and running and as you can see this doesn't close up this stays open here okay so this will always listen to incoming requests now so let's take a look at gonna open up here localhost 3000 I'm gonna pull it up here and as you can see whenever we visit localhost 3000 we are gonna get this hello there user okay let's take a look what we also have on this request so I'm just gonna console.log the request hit save here perfect and let's we actually have to close up our server and restart it to see so after we restart I'm just gonna pull this up a bit here and now see as you can see our request doesn't console.log until we visit our localhost again so I'm gonna hit enter here and that's when the request is gonna trigger here so what's happening here is actually this is listening to an event and an event can be an action that fires so whenever maybe you open a file or you access a specific URL that's when that event fires that's what this is doing that's why it's always staying open by the way because it's listening to an event you can imagine it as we worked in and on the front end code we had like a scroll event so it kind of works the same way this is always open and listening to an event and whenever that triggers well we have access to this request and response and we can handle it however we want so look at this we have a ton of information here oh my goodness we also get like browser information let's see what else do we have here but one thing that we have in here is called the URL which I cannot find for the life of me and what we can do with that is we can kind of just check where our user is on what URL and we can send back a response based on the URL that they are on so the way we can check that is like so we can say if the request dot URL triple equals to slash then we can the rest on right welcome to the home page perfect and then I can rest dot and and now I can also add another one if I want if request that URL triple equals to let's say slash user then I can rest all right welcome user Johnson there we go and then we can just rest dot and again perfect hit save and let's run this again I'm going to scroll all the way down here I'm going to close it you can also close it with control C by the way I didn't mention that so I apologize know HTTP server is running let's take a look here localhost 3000 hit enter welcome to home page perfect and we can go to slash users now and welcome user Johnson there we go that's really awesome so we can actually add HTML any in here so rather than writing welcome to home page we can remove this actually I can keep that but I can wrap it around and a h1 perfect h1 let's close this up not like that too much react code there we go hit save and I can also add information in the head here and again if you don't know what the head is is basically metadata to our page so in here the first thing I can provide is this 200 and hole 200 means is that everything is ok ok the response is good we can pass on the data and in here I can define an object with a content type like so and I can just add a a colon here and I can say this is a text slash HTML hit save we need to close this up again with control C and rerun the server and let's take a look now here so we have the user that's going to be the same but in here and our local Lowe's 3000 we actually get back HTML now so that's pretty cool we take a look at the source we get back this perfect and it's gonna say let's take a look it's gonna say content type HTML so that's very very cool but this can kind of get ugly really quickly because that means that I would have to rest up right again some things I can do too if I want and just add maybe a paragraph in here so I'm gonna change this to a paragraph it's gonna say additional content ok hit save let me restart this again really quickly open this up and as you can see this works perfectly but what if I just want to write a file in here and expose that rather than doing all of these crazy things well we can do that we did the FS module and the path module so what we can do is we can remove everything in here I'm gonna close this up and I'm just gonna import a few things up here so we can get the path require path and we can also get the FS require FS perfect let's create an actual HTML page now let me say index dot HTML and then here I can generate one and I'm gonna call this homepage and I'm just gonna say hello this is home I'm gonna add a paragraph with some lorem of 20 hit save and maybe a button if I want you button Wow hit save alright so we have an actual HTML page now and we can render that in here so the way we can do that is again we're checking if we are on slash we can leave this right head up here and the rest dot end okay but up here what I want to do before we do all of this is I want to access the FS and I'm gonna read a file so let's read file like so and I can pass bout join together leader name like so and then I can access that file so again this just gives us the path all the way and this folder and then I can just add index make sure it's in quotes index dot HTML there we go perfect so after I read this file I'm gonna add a comma here so this is the first argument remember and we also have access to that error here and the actual content that we're gonna get back so I'm gonna say beta and here okay and this is gonna be an arrow function because remember this is only on run here after we successfully read the file so what that means is that we actually need to take these two from here and place it in here there we go and what you is we have that and then at the end what we want to do is say res dot right and I can pass that data that we're getting back from the file let's hit enter close this up and take a look hit save and let's refresh this and there we go look at that we are rendering a full HTML page now this kind of gets super crazy because you're gonna have a ton of if statements and everything in here so that's why you're not gonna see a lot of people just use nodejs they're probably gonna use a framework like Express which is gonna take everything that we have in here and make it super super simple so don't worry you don't have to be a pro necessarily and no genius because most of the time again you're probably going to use a framework so again these are some of the core packages that come with nodes but we can install additional different modules and frameworks and other things and how can we do that well we can do that with NPM we can use NPM to install a lot of different packages so let's take a look on how that works whenever you create a project you want to initialize NPM so we can say that by writing MPM in it so down here okay over my fingers we're gonna say NPM in it hit enter and it's gonna ask us a few questions I'm gonna close everything up here because we don't need that anymore and it's gonna ask us our packages name we can leave it like so for now version it's gonna be fine just hit enter if you want to add a description this is just a small crash course on node hit enter entry point is gonna be a PS which is fine we named it happy yes okay that's command we can leave that empty get repository if you want to add a git repository to it that's cool some keywords that's to describe the specific package we can hit enter you can give the author name the vet and license we're not worried about any of that just hit OK okay okay it's gonna generate us this package here and basically what this holds is the name of our package and everything in here and something called scripts and something that we also are going to have something called dependencies so now what this package that Jason actually is it just keeps track of all of our different libraries and frameworks or packages that we install with NPM so everything is going to be displayed here so we can track them very very easily so one of the packages that I'm gonna install is something called a node man so we can install those remember how we use node to run specific files we can use NPM to install files libraries and things of that sort okay NPM install and all we have to do is just write the name of the package let me move out of the way here so you can see and the first package is called node node mod I hit enter package dot JSON just shows you the name of your packages installed in your project okay so now that we have node man installed again all node Mon does it helps us make our development life easier we don't have to close and restart our server up again if we want to do some changes it's gonna do it automatically for us and so we can go up here to the script and we can create his script to run this node month for us and we can also do other scripts here so let me show you an example that we did so far we wrote node index fjs to run our code so far but technically I can create a script here to run that code so let me give you an example I can make a something called develop here for example I can give any any name I want here and I can just run node in abs is here if I want hit save and the way you can run a script is by writing NPM run and the name of the scripts will develop hit enter and there we go look we just ran the node FJ yes perfect so let me actually do a console log here or something so we can see hello let's run that again so NPM run develop and there we are we get hello awesome so how can we integrate node mod I'm going to keep develop here I'm just gonna replace note with no daman hit save and let's take a look again I'm gonna run npm run develop but this is gonna do something else as you can see it starts watching our code so now every time I want to change this I'm gonna say I love you and hit save it's gonna automatically update everything for us we don't have to keep closing the server with ctrl c terminate and then reopen it so this is a very very cool package that is highly highly used and finally when you want to share your project you can actually just ignore this file so when you push up to get I'm just gonna create a final here get ignore you can add this node module so you don't need to push up this code node modules hit save and you would just push up all of this code with the package.json and now after you get that code all you would have to do is imagine you have like 20 packages here installed well this node modules would be very huge probably like a hundred megabytes or 200 megabytes you don't want to include this and github you would just download this project with a packet package and you would just run npm install and that would automatically install all your packages and create your own node module alright there we go that's the basics of nodejs and MPM so don't worry you don't have to be an expert in these things I promise you because at the end of the day you're probably going to use a framework like Express or code to create servers and rest api is and things of that sort so that's the next thing that we are gonna get into so it's gonna get fun fun very quick until next time thanks again so much for watching thank you so much for being here hey make sure to hit that Bell drop a sub and yeah i'm peacing out here we go

Channel: developedbyed

Views: 101,156

Keywords: node js for beginners, node.js tutorial for beginners, node js tutorial for beginners, node js tutorial, node tutorial express, node tutorial for beginners, dev ed, javascript tutorial, web development, npm tutorial, how to install nodejs, node js fs tutorial, nodejs http, nodejs http server, how to create a server with nodejs, backend nodejs, fullstack javascript

Id: zQRrXTSkvfw

Length: 41min 44sec (2504 seconds)

Published: Wed May 08 2019