Mastering Node.js Fundamentals: A Comprehensive 7-Step Guide

[00:00:00]one of the most valuable skills to have as a full stack web developer is without a doubt node.js and that's not going to change anytime soon but you might be wondering why I'm making a node tutorial in 2020 because if you've been watching the news you may have heard that node was killed last week by Deno when I lay my vengance upon making the extremely chaotic JavaScript world even more convoluted if you're just starting to learn JavaScript this can be very confusing and you might be wondering should I learn node or Deno the answer is node especially if you want to get a job or build a product when something becomes as established as node it doesn't get replaced you'll see things like this happen all the time a few years ago everybody was saying graphql would replace rest and 10 years ago people were saying no. JS would replace PHP these predictions never pan out and are just built on top of hype that being said I do think Deno is awesome and has a bright future both both both is good and if you learn node today those skills will mostly transfer to Deno tomorrow in today's video you'll learn the basics of nodejs in seven easy steps then we'll put those steps together to build a full stack web application because in my opinion the best way to learn how to code is to build something meaningful from scratch by the end of the video we'll deploy our code to the cloud so you can show off your API to your friends and family if you're new here like And subscribe and head over to fireship iio to follow along with the full write up to this video step one is to understand what no. JS is and why you would want to use it node.js itself is not a programming language but rather a runtime that allows you to run JavaScript on a server you see when JavaScript first came around in the 1990s it was designed as a simple scripting language to run in the browser as the web platform evolved JavaScript became more and more powerful and in 2009 we saw the initial release of nodejs now up until this time it was impossible to write JavaScript code on the server most servers were written in languages like Java or PHP it revolutionized web development because now a web developer could write a full stack application in a single language so that's all node.js is it's a way for developers to write JavaScript on the server when it could previously only be written in a web browser now there are a lot of low-level implementation details here that you don't need to know about as a beginner but if you really want to dive into how nodejs Works check out my How It's Made video but what kind of problems can node.js actually solve node.js can do a lot so instead of listing out a bunch of use cases I'll show you how to build a full stack web application from scratch this is how it'll work you visit a URL on the internet that points to your server when the request is received we can use node to handle the request and read a file from the server's file system and then respond back to the client so they can view the HTML in the browser step two how to install node.js node can be installed on Windows Mac or Linux and is probably already installed on your system in this tutorial I'll be using Ubuntu via the windows subsystem for Linux at this point I've just opened up an empty directory in vs code and then pulled up a terminal session you can find out if node is installed on your system by running node flag V from the command line as you can see here I'm running version 12.16 which is the current long-term support version if you get an error at this point it means that you don't have node installed and even if you do have node installed it'd be a very good idea to use a package called called node version manager to manage the installation of different node versions on your system there's an NVM package for mac and Linux or a separate package for Windows go ahead and follow the instructions to install NVM on your system and that will give you the ability to install any version of node.js that you want for example you could run NVM install 12163 then run NVM use to use that specific version as your runtime and now that we have node.js installed we can move on to step three hello world but first if you're serious about node.js consider becoming a pro member at fir ship. it'll give you access to my full length courses almost all of which cover Advanced use cases for nodejs but we need to walk before we can run so how do we actually use this thing one way to mess around with node is in repel mode which stands for read of Al print Loop when you type node into the command line it allows you to run JavaScript code and will print out the results for example we can type console log hello world and it will log that value out this is nice for messing around but go ahead and hit contrl C twice to shut it down because in most cases we want to execute JavaScript code that lives in an actual file the default entry point into a node.js app is the index.js file go ahead and create an index.js file manually in VSS code then inside that file add console log hello world you can now run the code inside this file with the node command followed by the path to this file and because it's an index file you can actually just point to The Parent Directory congratulations you just built a node app step four understand the node run time in most ways JavaScript works the same way it does in the browser as it does in node.js but there are some very important differences you should know about first node has a handful of buil-in identifiers one of those globals is console which we've already been using to log out values to the terminal there's another Global with a name of global this object is a name space that is available throughout the entire node process for example if we assigned a lucky number property to Global we could then access it anywhere else in our code if you're a front-end web developer you can compare Global to the window object in the browser now I think the most important Global to be familiar with is process which gives you access to the currently running node process you might use it to check the current platform or operating system which in my case is Linux or grab an environment variable from your server but this gives us a great opportunity to segue into step five how do events work in node.js you'll often hear people describe it as an asynchronous event driven JavaScript runtime the runtime implements a thing called an event Loop just like a web browser does and it allows not to push intensive operations off to a separate thread so only very fast non-blocking operations happen on the main thread and this is why people often call node non-blocking it's a design choice that makes node.js very suitable for things that require high throughput like real-time applications web servers and things like that okay so how does that affect me as a coder Well normally you won't have to think about the low-level details you just need to know how events and callbacks work in most cases you'll listen to events events can come in many forms but one example is on the process proc Global that we looked at earlier before a node process finishes it emits an event named exit we can listen to this event using on and then register a callback function as the second argument when the exit event occurs node.js will run this function and that's where it gets the name callback because the function isn't called the first time nodejs sees it it's only called after the exit event occurs at some point in the future this event is built into node but you can also create your own from scratch we'll import an event emitter from the events module that is built into node and we'll look at modules in more detail in just a minute we can create a custom event emitter by instantiating the class and then we'll register a call back that fires on the lunch event now that the call back is registered you can simply call event emitter emit with that event name and that triggers your call back function to run as you can see here we emit the event twice which will run the Callback function twice this event driven style of programming is extremely useful when you have something that is CPU intensive and with that we can move on to step six the file system node has a built-in file system module called FS it can read write and delete files on the file system among other things and it can also do things in a blocking or non-blocking way allow me to explain that by showing you an example first create a file on the file system called hello.txt and then add whatever text you want inside of it in our JavaScript code we'll import two functions from the file system module called read file and read file sync anytime you see a function that ends in sync think blocking or in other words it will need to finish all of its work before any any of your other code can run we can read a text file in node by simply passing the path to that file and we'll specify the encoding as utf8 now reading a file might take a while especially if it's a very large file and what you'll notice here when we run our code is that the second console log won't run until after that file has been read luckily you can make your code non-blocking by refactoring this to a callback with read file we pass the same first two arguments and then add a callback function as the third argument inside the function we can access an error object if the operation fails or when successful the actual text from the file the super cool thing about this is that even though the console log to the text file comes first in our script it's not the thing that gets executed first node registers the call back executes the rest of the script and then finally runs the call back when the file has been read so that gives us two different ways to read a file but there's actually one other way we could go about this and that's using a promise based solution promises are also asynchronous and non-blocking and they tend to produce much cleaner code when compared to callbacks notice how in this example we're importing file from the promises namespace this gives us a function that returns a promise when called if you're using the latest bleeding edge version of node you could potentially use this function with top level a weight which means you can use a weight to resolve the promise here at the top of the script however since we're currently using node version 12 we'll go ahead and wrap this in an async function and this async await syntax will make your code much easier to read especially when you have multiple async calls in the same function okay so now that you know how to read files I want to backtrack a little bit and talk about this require function that you've seen me use in the past couple examples step seven modules a module is nothing more than a Javascript file that exports its code note has a bunch of built-in modules like fs and events that we've already looked at and there's a long list of other modules beyond that the traditional way to import a module in node is to use this require function but a quick side note on that first because node recently added support for ES modules which Ed the import export syntax most node.js code out there written in vanilla JavaScript still uses require so it's very important for you to know as a node.js developer and if all that's confusing to you well all I can say is welcome to the JavaScript world let's look at how we can use modules in our own codebase create a new file to serve as your module then go into your index.js file create a variable for the module and then import it using require when you console log it you'll notice that it's currently just an empty object in order to make a module useful you need to export some code from it in the modules file you can reference this object with module.

[00:09:57]exorts you can add new properties to the object or redefine it as a new object in either case whatever you add here will now be available to use in the other file and as you can see the object is no longer empty when we console log it but at some point you'll very likely want to use somebody else's code out there in the world and the primary place to do that is via node package manager or npm which was recently acquired by GitHub which itself was recently acquired by Microsoft when you installed node earlier in the video it also installed npm which is a tool you can use to install remote packages to use in your own code the first step we'll want to take is to open the command line and run npm and nit we'll use the Y flag to use the default options and what you'll notice is that it creates a package Json file here in the root of the application this file can contain metadata about your project but most importantly it keeps track of the dependencies that you use here at this point we haven't installed anything yet so let's go ahead and change that by opening the command line again and running npm install Express Express is a minimal web application framework and one of the most popular third party node modules after running the command you'll notice a few things happened here in the package Json file it added Express to the dependencies and pegged it to a specific version this dependencies object allows you to manage multiple dependencies in a project and then reinstall them all at once on a different system now the actual raw source code for the dependency lives in this node modules directory you should never have to modify code in the node modules directory if you find yourself writing code in here you're probably doing it wrong that's because the package Json controls how this directory is built it fetches your remote packages Saves The Source here and that process should be able to be repeated on any system now that we have this package installed we can import it by name in our JavaScript code in this case we simply require Express and now we've reached the point where we're ready to put these seven steps together to build a real full stack application and deploy it to the cloud what we're building here is actually just your typical full stack web application our server will live on a URL and when a user makes a request to this URL in the browser the server will respond with some HTML in our code we'll first create an instance of an Express app an Express app allows us to create different URLs and endpoints that a user can navigate to in the browser and then we Define code for the server to handle those requests now I don't want to get too deep into HTTP but when the user navigates to a URL in the browser it's what's known as a git request which means they're requesting some data on the server and not trying to modify or update anything on the server with Express we can set up an endpoint like that by calling app.get and then the first argument is the URL that the user will navigate to in this case we just use a forward slash for the root URL but feel free to create multiple Pages for your web app by creating different URLs the second argument here is our callback function you can think of every request to this URL as an event and then you handle that event with this function an Express gives us two parameters to make use of the request and the response the request is the incoming data from the user in this example we don't really need to parse any data from the request however in many cases you might want to look at the headers or the body of the request to authenticate a user or understand what the user is trying to do at this point we need to implement the code to handle the request what we want to do is read some HTML from our file system and then send it back down to the browser as you can see here I'm creating a file called home.html with just some generic HTML markup inside in our source code we can then import read file from node's file system module just like we did earlier we'll read the file use utf8 encoding then in our callback function here we'll have access to the HTML string and we can send a response back down to the client by calling response.

[00:13:33]send and also if there's an error in the call back we can handle that by sending a response with a status code of 500 which means a server error so the user knows that something went wrong on the server and that's all there is to it we now have a way to send HTML from the server to the client now we just need to tell our Express app to start listening to incoming requests we do that by defining a port which will normally come from a node environment variable then we call app. listen with that port and when it starts up we console log that the app is available on Local Host 3000 you can start it up by opening the command line and running node with the current working directory if you go ahead and open it in the browser you should see your HTML return back to you now there is one important thing you should know at this point and that's that callbacks can be very difficult to work with especially as your app grows in complexity it often leads to a state known as callback hell where you have a bunch of callbacks nested within callbacks within more callbacks and so on a great way toid code like this is to use promises instead of callbacks and that's very easy to do in node.js instead of importing read file from FS we'll import it from fs. promises we can make our callback function async and then we can write the response in a single line of Code by saying response send and then await the operation to read file that's much more concise and readable but it's especially useful when you have multiple async operations to handle in a single request so now that we've built a nodejs app how do we deploy it to the cloud so people can actually use it there's a bunch of different ways we could do it but an easy and free way is with Google app engine app engine has what's known as a standard environment for node.js up to version 12 and what that does is provide you with a server in the cloud that scales automatically based on the incoming traffic to your app it's incredibly easy to set up but you first need to have a Google Cloud platform account and also the Google Cloud command line tools installed on your local system once you have that done you can simply go into your source code and create an app.yaml file this file is to configure your Cloud Server the only thing we need at this point is to specify a runtime of node.js version 12 app engine will run your code by looking in the package Json file for a start script so let's go in there and Define a start script that runs node in the current working directory to start our Express app from there we can simply open the command line and run gcloud app deploy that'll take a minute and then it will give you a URL where you can access your app publicly on the web congratulations you're now a full stack Cloud architect if this video helped you please like And subscribe and if you really want to dive deep into node.js and express consider becoming a pro member at fireship iio I have a whole bunch of advanced content covering real world use cases with these Technologies thanks for watching and I will see you in the next one [Music]