Introduction to NodeJS: Back-End JavaScript

1. Introduction: Hi, I'm Keegan and welcome to the introductory. No Js course. This course is perfect for anyone wishing to take the job script skills to the back end. You'll learn the core fundamental skills that you need to program. And no, yes, those fundamental skills include no version, manager note, package manager, dependency management. And then we're gonna learn with the difference between a client and a server is finally, we'll talk this course off with the project. Well, you'll learn how to build a no Js server using express No Js Frank looking forward to seeing you in the next class. 2. Clients and Servers: welcome to the next model of the no Js course. This module will be talking about the difference between clients and servers. This module is particularly important because it will enhance your understanding of how the Internet works in general. Let's get started. No Js is a server side JavaScript language. Traditionally, JavaScript has only been able to be executed by Internet browsers such as Mozilla Firefox or Google Chrome. So let's talk about clients and servers. What's the difference? Well, it client requests information, and the server responds to those requests. What's that look like? Exactly? Well, on the left hand side, we have clients, and on the right hand side, we have servers. So we're going to use the analogy, the customer in a restaurant. So a customer walks into a restaurant and you can think of a customer as an analogy for a computer, like when you visit Google. Or if the customers customer was ordering food online on an online menu, the client or the customer makes a request to the server. Now, humans and computers speak very different languages, said the client. The human client would say something like one burger, please, and the computer would query server with a path or you were out. Now, on the right hand side, the server is an actual server. It's a it's a waiter. And then for the computer side, it's a stack of machines waiting for requests. The server then responds to the client in the top example, with the sentence right away. But machines speak different languages, and so on the bottom example, you'll see that the server gives back the client response, telling the client whether or not it successfully executed its request. So once again, client JavaScript is JavaScript that's executed by the browser, and no Js is executed by your computer. Power of this is that you no longer need to different engineers to build full stack application. Full stop stack application is an application that uses both front end and back in technology. Years ago, you would need to hire someone to build your front end and then a different person organization to build your back end. Now that we can write JavaScript for both the front end and the back end, proficient JavaScript developer will be able to write both front and JavaScript or client Java script, and back in JavaScript, which is no Js, we will see you in the next module 3. Node Version Manager: welcome to the second module of this course in this module. We're gonna cover the topic of node version manager or envy em. So the purpose of note version manager was to manage switching between different versions of note for different projects. So let me give you an example. If we're working on a Project A and Project A requires that we used note version knowing we're also working on a Project B in Project Yves requires that we work on note version 10 . Then switching between those projects and switching the version of no becomes a little difficult unless we have a tool that automates that that that's rich in process and makes it an easy thing to do. So that's exactly what node version manager is. No version manager allows us to pick the version of No, we want to be working in and quickly switch from one version to another. So let's go to Google and let's type in node version manager. This top link here is the one we want. If you're on windows than then, click the second link and followed the installation instructions there were going to use, um on Max and we're going to use the top link here, so scroll down to the installation script. Uh, this is the command that we're gonna use right here. Let's dissect the command a little bit. Curl will going and get the contents of this link right here. So if we look at what is inside of this link, this is just the installation script for N v m. So curl will go and get that. And then this quite character and gosh will execute the contents of this year old in a terminal. So now that we've copied that, we can open up a new window and then just paste in that curl command, this is the is curl going and getting the contents. Uh, this line here tells me that I would have and vm installed. And that's okay. You won't see this unless you have in the m and stone. And then the rest of this will be relatively the same. And at the very end, you'll get this three lines starting with export. This is very important that you copy this and then you paste it in and hit. Enter what this will allow you to do after closing your terminal in opening a new one. What this will allow you to do is it gives you access to the N V M Command. And so now when we type in the M and then a command that envy m understands like version, it'll actually execute So we can type in the end Dash, dash, help. And we can see all of the commands that NPM will actually understand, which is great. Let's just take a quick look at N v m l s. So l s well, list the folders or files in our directory in our current directors and the MLS does something similar. It tells us what versions of MBM or note that we currently have installed So you can see that we have version five or six or seven, etcetera, etcetera. Let's go and get a different version of note using in VM install. So the NPM install command is here and we can just type in number. So I don't have version for So let's go and get that envy m install four and you could see n v m went and fetched me No version four And then it says Now we're using no adverse for. So if I took node data should be I should see for 91 and this matches up nicely, so that's good. Now how can we switch back to know version eight the one that we're using before what we can say in VM use eight and that will switch us back to using note version eight. We can check that by typing their dash B and now we see that we're using no date again. So this is in vehement and not show just those simple commands and vm install and VM use. It gives us an easy way to switch between versions of note. We'll see you in the next Montreuil. 4. Hello World App: Welcome to the next model of Node.js course. What we're going to covered in this module is having to write the simplest node.js application. And then it's just a simple hello world. No Js application. I recommend that you go and get yourself on Intelligent Code editor program. I'm going to use visual studio code for this exercise. Visual studio code is my favorite code editor, and I encourage you to go get something similar, like Adam. So we're gonna go individuals to do code. One of the reasons I like it is because it has access to a terminal. So we're gonna open up a new terminal so that we can quickly run the no jazz program. So if I just execute PWD, which gives me the current working directory path that I'm in, you can see that I've created a folder called Node.js and that there's no programs or files inside of it at the moment. So the first thing that we need to do is create a file, a job script file s so that we can start writing a program. I'm going to do that with Touch Touch Index doctor. Yes, and up Will pop index dot Js We're gonna open that file in a simple hello world program. Should just go put hello world to the screen And so we're going to leverage the consul dot log function. Teoh quit Teoh the Terminal So let's right pencil dot log and let's put Hello, World Inside of that, we've saved a file. The way that we run a no Js program is with the command node. So let's just first make sure that we have new installed that we do. I'm using Version eight. That's good. So now we can say note and then pass it the name of the file that we want to run so we'll pass it. Node index dot Js inventor and boat pops Hello world. So let's complex it by that just a little bit Knowed Hello, world one Hello world to I will say that Good note in next Jacks. So there you go. This is a simple no Js application. The reason why this is significant is because that job script used to be just a browser language on then. Sometime ago, no jazz was created. And so what you're seeing is your computer actually reading and interpreting the job script rather than a Peraza reading and interpreting and executing the JavaScript and in future modules will learn out of complex. If I this and build a server from Node.js, we'll see you there. 5. Node Package Manager: Welcome to the next model of the new J S course. What will be covering in this course is in TM, which is note package manager. You should have already installed note version Manager, which gives you access to note. And we didn't talk about this in that model, but it actually also gives you access to NPM, which is no package manager. So let's go to visual studio code where we can get started. I'm going to delete our previous code that we were working with and I'm going Teoh Clear Terminal. So just to make sure that we have npm available to if you're and typing and PM Dossevi and we're gonna see that we have a version 6.9 point zero and stop and that's great, that's gonna do what we want it to do. So very basic thing that we're gonna do with NPM first is we're going to initialize this repository as in no Js package or a job script package. I mean, do that with NPM in it. So type n p. M. And A and hit enter and what both happened is no package manager will take you through an initialization script or a survey question and answer if you will. So we get to name this package this folder. So I'm just going to name it to Torrey. Oh, and it is version one point a point, though. Ah, teaching. Oh, to write a note. Yes. The entry point is in fact, index Doctor. Yes. Uh, we're gonna leave from Blank. Just hit. Enter. There's no give repository that I'm uploading this to Justin. Enter. I don't really need to get any key birds, and I myself was not there. So this is what our package will look like. And so this is okay to me. So I hit enter, and then what gets created as a package dot Jason file. So this is really important. It actually tracks dependencies for our project. And so what a dependency is is 1/3 party package that another developer somewhere in the world has written that you want to make use off in your program, So that's really great. One important factor in programming in general is Do not repeat yourself or dry for short. Don't repeat yourself. Don't repeat yourself. Uh, a little ironic how I said it a couple times, but I feel like it was worth saying over and over again. It's really, really important. So that fundamental concept is that someone else has written something and they perfected a package or a piece of code that does exactly what you needed to do. There's no reason for you to write it yourself so you can go and use no pocket rancher to go and get a very well thought of well constructed and bub free package. So let's look at what that process looks like. We're going. Teoh, run NTM dash dash health just to see what commands are available to us. Uh, so these were all the commands that we can use in conjunction with NPM. The one that we are particularly interested in is installed. And what install will do is look at an NPM registry, which is a big library of all the packages that exist and get the package that you requested. So let's open up a browser now, and we're going to look for a package called Shock Shark in PM and that will take you to a site in PM Doctor. Yes, and this is the library that were searching now. So we can search through using the search right here. Any number of packages, which is great. What Shaq does is it allows us to print or use the culture log with different colors. And so if viewing a page, you want to use it, Uh, check out how they like you to install it and then check out how they actually want you to use it as well. So we're gonna go and grab this NPM install chocks committed. I'm gonna go back Teoh average code. And we're just going to execute that command and then watch what happens so you can see it's loading it. Windham fetch packages really, really quick. It added seven packages, which you know you might not expect because we only wanted one. But when you got seven, we're gonna talk about why that happened. What was added to the package stock? Jason Fire was a dependency field where we can see that we went and grabbed chalk version 2.4 point two. So here in the Node Modules folder, this is where this dependency active lives where that code actually lives so we can look a job and we can look at all the code that makes up this package. If we wanted to Just really great. You can see that truck has a pact. Start Jason file as well. And that describes chalk as a package Has all sorts of this great information. If you want to look into it, we're gonna close that down. So these other six packages that came with choc choc needs those packages in order to run. And so, even though we have one dependency of chalk in our program in our tutorial package, Shaw has six other packages that it requires to run. And so no package manager knows this. And so it goes and grabs the other packages and puts them in the note modules folder for chalk to use as well. So now that we have trunk, let's actually do something with chalk. Uh, this is a very basic usage that was provided by the developers, and we think that for that. So this is ah, more complex version of hello world where hello world will be open it in blue text rather than in the standard text. So we just pasted that in on Let's dissect this for a moment. Eso first thing the first line is actually initializing the package and going and retrieving it from the node Node Models folder. So this line such is chock from node modules. That's useful. And then we say this line puts hello world in live text and that's right. Another one line We're Hello Berl in red text. Change that to read. Cool. So now what we're expecting to happen is we'll see Hello World twice and the first time it will be in blue text the second time it'll be in red text so that we can run our program with node index doctor. Yes, and what gets acquitted is note your hello world in blue text Hello World in red text. So this is a very basic overview of note package manager. What we used again was NPM install and then the name of the packets that you want to stop. There's thousands upon thousands of packages out there, and so I encourage it is to look through the NPM registry just to see what is out there. A couple of packages that I could recommend would be low dash, and that's spelled L O D A S H. Shock is a good one, and later on we'll be using Express, which is a note GS framework. So stay tuned for when we actually build in expressed server using note GS but seeing the next Montreuil. 6. package.json: welcome to the next module of the new Js course in this model will be dissecting the package. Start Jason on fire. There's much more to unpack there. So it's useful to talk about what's inside the package start Jason file because they can get quite large and complicated. So I hear I have opened the package start Jason Oil when we went to the NPM, innit? Command. All of this was pre generated, but it doesn't mean that we can't change it. So feel free to name your packing something else. Uh, it gets particularly complicated when you start uploading your codes to get help. Then we might not going to change the name of the package. We're gonna just take aside version right now. We're gonna talk with that in a second. The description can change any time you like. The main file could change in time. We like script section is particularly interesting. It's a short cut to run a larger command and so we can actually run something from the scripts section of the Pakistan Jason file by saying something like NPM run. Okay. And what that will do. Is it well, actually echo air? No, test specified an exit one. That's what it did. That's what it echoed for us. No test specified. So let's actually have it do something useful. Instead, let's say start so put. Come in to actually start our server and the command that we ran earlier with node index dot Js. If we run that in our program runs so we can active pro. Put this straight in here instead. And instead of running note indexed after, yes, we can run in the hamster, and that will do the exact same thing. So the reason why you might want to do this is because you won't always start, you know, jazz program with note. Or you might want to pass an argument. Intuit argument. You meant four, for example. So we're making use of the number four or of that argument within the program, and I might not want to say no to index dot Js stars argument for all the time. Every time I want to start my program. If I'm doing a lot of testing, this could be arduous or cumbersome. So instead we could just say NPM start, and what gets run by NTM is node index Doctor? Yes, Dust ash argument for So it's a shortcut into this command here. Just really useful I'm gonna do with that for now. So now we're gonna talk about version and dependencies and the reason why those particular asked those The reason why this is important is because of the standard called semantic version ing. They're gonna write that for you. It's called Semantic Google. This is your spare time. Uh, it's the idea that we should all like all developers should have a standard way of talking about what version a package for dependency is. So it works like this. There's three numbers number dot number dot number where the first number is a major number . The second number is a minor number, and the third number is a patch number. So is more than likely that you've seen this three numbers FEMA all over the place all over the Internet. Programs that use this is what it means. So when a developer is developing a new package, they will likely increment the major number when they finished the first generation of their program and the likely increment the modern number when they've introduced a new feature or a major major bug fix. And then the increment. The patch number when they've implemented a minor bug fix or a small feature. Or maybe changing a typo, for example, patches getting fermented all the time. Marner, not so often in major, very rarely major major increments happen. Maybe once a year, twice a year. It really depends on the development cycle of that particular developer or development team . So if we look at what shock it's dependency, this carrot actually means something important. It means grab at minimum person 2.4 point two. But look for the latest version. And if the latest version exists, we want that one. And so we can actually cross reference Jock two for two with what is in her Nude Modules folder. So let's drill into new modules and look at the package. Start Jason file for for Job, and we can see that we actually do, in fact, have chalk version 2.4 point two, which is really useful. Useful to know, no semantic version. ING is important for NPM because package a being he's both exist, but one would have a dependency of chalk version 2.4 point two, and the other might have the dependency of two point three point. Oh, and so no package manager with this in mind will actually go and fetch you one version of chalk that is too poor. 3.1 version of shock that is 2.4 point two and it'll store both of them in node modules. And that's what note package managers doing behind the scenes. It's going and grabbing those packages and optimizing where they live and how they all get pulled into your project. You see, in the next model, thank you. 7. package-lock.json: Welcome to the next model of the NODE.JS course. What we're going to cover today is package dash lock, Doc. Jason. So let's head over to our code so that we can start so you can see that package stash locked out. Jason exist over here. So does Newt Modules. I'll tell you right now that it's actually very safe. If you just want to delete nerd modules and delete package start, dash locked out. Jason, we can quickly get those programs first or those files back by running NPM install and damn install reads your package dot Jason file. It looks in the dependency section and goes and gets all the propensities, the dependencies that you have listed as well as all of those dependencies. Dependencies. So let's run in PM and stuff. You notice that two things happen. No modules is now populated, and we now have a package dash walk dot Jason file. So what does package dash walked on? Jason actually do it. Fixes them, works on my machine error. You're right that for you works on my machine. So this is when you're working in a an industry setting or in a collaborative setting and you're building a package or you're building a code base and then you someone else approaches you and wants to help you build that, and you're more than happy to proceed the help, so you send them over their code, base your code base and they run NPM install. And for one reason or another, they get different modules. They get different node modules, so when they run their program, it doesn't behave as is it as it is behaving on your computer. So then that person says, Oh, it's not working and you say, Well, it works on my machine. I don't know what your problem is. So package Dash Lock is invented to stop them works on my machine error. When did accent does? Is it records? Which version of each of the packages that actually exists and nude models so we can see in the dependencies? There's actually a 1 to 1 correlation, uh, each item in the dependencies object for each file in the nude modules folder, and every courts the version, So chalk version two for two color convert color name escapes during rejects, has flag and supports color. So what to develop were would then Dio is commit. They're packaged tassel block dot Jason file to the repository that they're working on. So the next time that you run and PM install it looks a package locked on Jason and grabs the same version that the original developer I was working on just great solves the works on my machine error. Stay tuned for the next model. 8. ExpressJS: welcome to the next module of the note jazz course. Within this module, we're going to be talking about express the most common no Js server framework. What express helps us do is organize the roots or the requests that clients can make to the server. So let's start by doing a Google search for express Js. First results should look something like this. I want you to click on the Hello World example Now I have my code set up in visual studio code ready to go with our hello world example before we need to delete everything except the chalk require statement. Next, what we're going to do is copy and paste the code that we found on that website. Save that file and then we're going to talk about what each one of these lines mean and and we can make our program work now. Right now, a program will not work because we do. We have not installed express as a dependency for our project. Let's just take a look and what kind of error we will see if we try to run a program. Now we can run a program note index doctor Yes, and If you ever see the error cannot find module and then the name of a module, it means that you need to install that module. We can double check that we do not have expressed installed by looking in the dependency section of her package stock. Jason. So let's run NPM Install Express. Our computer will go and fetch the package download expressed and its dependencies and then add expressed or a list of dependencies impacted stock. Jason. No, quite a bit more confident that this program we'll run now because we have gone out and got express line five simply creates a new express server. 16 tells Express which port Listen on Line eight is where one of the magic things that happened. So if someone were to request the default route and the default route is just slashed from local host Port 3000 then what? They would get back in simply text that says Hello world. Every request made to the server has two parts the request itself and then the response. The response is how we interact with the client. The request tells us information such as query parameters or the actual request path itself and then online. 10. We actually tell express to listen on the port provided for requests. So let's run the program and see what happens. So you can see that I no longer have ah cranked asking me for more input. I'm currently running this program and it's listening right now. What this means is we can visit local host 3000 and we can see that we get the hello world text back on her page. So what we did is we asked for the default route the server responded with Hello world. Let's take a look at the boat. How weekend? Learn a bit more about what's going on here. They're gonna break open the function scope and just install a simple council log, maybe inbred text. Hello World. It was called. We want to run the program again. Refresh the page, sending a request to the server when we can see that now that council log was executed, we refresh the page one to three times. We should see three more council logs. Each time a client like a browser or crest this route, this culture lung will execute and hello world will be sent to the requester. Stay tuned for more information on the project that you'll be using express for