Node.js Ultimate Beginner’s Guide in 7 Easy Steps
Fireship
youtube· 16:16standard
1.Why Learn Node.js?
0:00 / 1:54This chapter introduces Node.js as a valuable skill for full-stack web developers, addressing common misconceptions about its relevance compared to newer technologies like Deno. It emphasizes Node.js's established position in the industry and its importance for job seekers and product builders.
- Node.js
- Deno
- Full-stack web development
What's inside this course
- 0:00
1. Why Learn Node.js?
This chapter introduces Node.js as a valuable skill for full-stack web developers, addressing common misconceptions about its relevance compared to newer technologies like Deno. It emphasizes Node.js's established position in the industry and its importance for job seekers and product builders.
- 1:54
2. What is Node.js?
This chapter defines Node.js not as a programming language, but as a runtime environment that enables JavaScript to run on a server. It explains the historical context of JavaScript's evolution from a browser-only language to a server-side technology.
- 2:35
3. Node.js Use Cases
This chapter explores the practical applications of Node.js by outlining how it can be used to build a full-stack web application. It illustrates a basic request-response cycle where Node.js handles requests, reads files, and responds to clients.
- 3:46
4. Install Node.js with NVM
This chapter guides users through the process of installing Node.js on various operating systems. It strongly recommends using Node Version Manager (NVM) to manage different Node.js versions, demonstrating how to install and switch between them.
- 5:25
5. Hello World in Node.js
This chapter demonstrates how to execute JavaScript code in Node.js, starting with the REPL mode for interactive testing. It then shows how to create and run a 'Hello World' application from an `index.js` file, which is the default entry point for Node.js apps.
- 7:07
6. Understand Node.js Globals
This chapter explains key global objects available in the Node.js runtime, differentiating them from browser-specific globals. It introduces `console`, `global`, and `process` as essential built-in identifiers for interacting with the Node.js environment.
- 8:35
7. Event-Driven Architecture
This chapter delves into Node.js's asynchronous, event-driven nature, explaining the event loop and its role in non-blocking operations. It demonstrates how to listen for built-in events like 'exit' and create custom events using the `EventEmitter` module.
- 11:37
8. Node.js File System Module
This chapter introduces the built-in `fs` module for interacting with the file system, demonstrating both blocking (`readFileSync`) and non-blocking (`readFile`) methods. It also shows how to use promises with `fs.promises` for cleaner asynchronous file operations.
- 14:13
9. Node.js Modules and NPM
This chapter covers Node.js modules, explaining how to create and export custom modules using `module.exports`. It then introduces NPM (Node Package Manager) for installing and managing third-party packages like Express, detailing the role of `package.json` and `node_modules`.
Every chapter ends with a checkpoint (quiz, flashcards, retell, diagram, or prediction) and the course closes with a final boss-fight. More courses →
Transcript (505 segments)
0:00one of the most valuable skills to have
0:02as a full stack web developer is without
0:04a doubt node.js and that's not going to
0:06change anytime soon but you might be
0:07wondering why I'm making a node tutorial
0:09in 2020 because if you've been watching
0:10the news you may have heard that node
0:12was killed last week by Deno when I lay
0:14my vengance upon making the extremely
0:17chaotic JavaScript world even more
0:19convoluted if you're just starting to
0:20learn JavaScript this can be very
0:22confusing and you might be wondering
0:23should I learn node or Deno the answer
0:25is node especially if you want to get a
0:27job or build a product when something
0:29becomes as established as node it
0:30doesn't get replaced you'll see things
0:32like this happen all the time a few
0:33years ago everybody was saying graphql
0:35would replace rest and 10 years ago
0:37people were saying no. JS would replace
0:39PHP these predictions never pan out and
0:41are just built on top of hype that being
0:43said I do think Deno is awesome and has
0:44a bright future both both both is good
0:49and if you learn node today those skills
0:50will mostly transfer to Deno tomorrow in
0:53today's video you'll learn the basics of
0:54nodejs in seven easy steps then we'll
0:57put those steps together to build a full
0:58stack web application because in my
1:00opinion the best way to learn how to
1:01code is to build something meaningful
1:03from scratch by the end of the video
1:05we'll deploy our code to the cloud so
1:06you can show off your API to your
1:08friends and family if you're new here
1:09like And subscribe and head over to
1:11fireship iio to follow along with the
1:12full write up to this video step one is
1:15to understand what no. JS is and why you
1:17would want to use it node.js itself is
1:19not a programming language but rather a
1:21runtime that allows you to run
1:22JavaScript on a server you see when
1:24JavaScript first came around in the
1:261990s it was designed as a simple
1:28scripting language to run in the browser
1:30as the web platform evolved JavaScript
1:32became more and more powerful and in
1:342009 we saw the initial release of
1:35nodejs now up until this time it was
1:38impossible to write JavaScript code on
1:39the server most servers were written in
1:41languages like Java or PHP it
1:43revolutionized web development because
1:45now a web developer could write a full
1:47stack application in a single language
1:49so that's all node.js is it's a way for
1:51developers to write JavaScript on the
1:53server when it could previously only be
1:54written in a web browser now there are a
1:57lot of low-level implementation details
1:59here that you don't need to know about
2:00as a beginner but if you really want to
2:01dive into how nodejs Works check out my
2:03How It's Made video but what kind of
2:05problems can node.js actually solve
2:07node.js can do a lot so instead of
2:09listing out a bunch of use cases I'll
2:10show you how to build a full stack web
2:12application from scratch this is how
2:14it'll work you visit a URL on the
2:16internet that points to your server when
2:18the request is received we can use node
2:20to handle the request and read a file
2:22from the server's file system and then
2:24respond back to the client so they can
2:25view the HTML in the browser step two
2:28how to install node.js
2:30node can be installed on Windows Mac or
2:32Linux and is probably already installed
2:33on your system in this tutorial I'll be
2:35using Ubuntu via the windows subsystem
2:37for Linux at this point I've just opened
2:40up an empty directory in vs code and
2:42then pulled up a terminal session you
2:43can find out if node is installed on
2:45your system by running node flag V from
2:47the command line as you can see here I'm
2:49running version 12.16 which is the
2:51current long-term support version if you
2:53get an error at this point it means that
2:55you don't have node installed and even
2:56if you do have node installed it'd be a
2:58very good idea to use a package called
3:00called node version manager to manage
3:02the installation of different node
3:03versions on your system there's an NVM
3:06package for mac and Linux or a separate
3:08package for Windows go ahead and follow
3:10the instructions to install NVM on your
3:11system and that will give you the
3:13ability to install any version of
3:14node.js that you want for example you
3:16could run NVM install
3:1912163 then run NVM use to use that
3:22specific version as your runtime and now
3:24that we have node.js installed we can
3:25move on to step three hello world but
3:28first if you're serious about node.js
3:29consider becoming a pro member at fir
3:31ship. it'll give you access to my full
3:33length courses almost all of which cover
3:35Advanced use cases for nodejs but we
3:37need to walk before we can run so how do
3:39we actually use this thing one way to
3:41mess around with node is in repel mode
3:43which stands for read of Al print Loop
3:45when you type node into the command line
3:47it allows you to run JavaScript code and
3:49will print out the results for example
3:51we can type console log hello world and
3:53it will log that value out this is nice
3:55for messing around but go ahead and hit
3:57contrl C twice to shut it down because
3:59in most cases we want to execute
4:01JavaScript code that lives in an actual
4:03file the default entry point into a
4:05node.js app is the index.js file go
4:08ahead and create an index.js file
4:09manually in VSS code then inside that
4:12file add console log hello world you can
4:15now run the code inside this file with
4:16the node command followed by the path to
4:18this file and because it's an index file
4:21you can actually just point to The
4:22Parent Directory congratulations you
4:24just built a node
4:27app step four understand the node run
4:30time
4:30in most ways JavaScript works the same
4:32way it does in the browser as it does in
4:34node.js but there are some very
4:36important differences you should know
4:37about first node has a handful of
4:40buil-in identifiers one of those globals
4:42is console which we've already been
4:43using to log out values to the terminal
4:46there's another Global with a name of
4:47global this object is a name space that
4:50is available throughout the entire node
4:52process for example if we assigned a
4:54lucky number property to Global we could
4:56then access it anywhere else in our code
4:58if you're a front-end web developer you
4:59can compare Global to the window object
5:02in the browser now I think the most
5:03important Global to be familiar with is
5:05process which gives you access to the
5:07currently running node process you might
5:09use it to check the current platform or
5:11operating system which in my case is
5:12Linux or grab an environment variable
5:14from your server but this gives us a
5:16great opportunity to segue into step
5:18five how do events work in node.js
5:20you'll often hear people describe it as
5:22an asynchronous event driven JavaScript
5:25runtime the runtime implements a thing
5:27called an event Loop just like a web
5:28browser does and it allows not to push
5:30intensive operations off to a separate
5:32thread so only very fast non-blocking
5:34operations happen on the main thread and
5:36this is why people often call node
5:38non-blocking it's a design choice that
5:40makes node.js very suitable for things
5:41that require high throughput like
5:43real-time applications web servers and
5:45things like that okay so how does that
5:48affect me as a coder Well normally you
5:50won't have to think about the low-level
5:51details you just need to know how events
5:53and callbacks work in most cases you'll
5:55listen to events events can come in many
5:57forms but one example is on the process
6:00proc Global that we looked at earlier
6:02before a node process finishes it emits
6:03an event named exit we can listen to
6:06this event using on and then register a
6:08callback function as the second argument
6:10when the exit event occurs node.js will
6:12run this function and that's where it
6:14gets the name callback because the
6:15function isn't called the first time
6:17nodejs sees it it's only called after
6:19the exit event occurs at some point in
6:21the future this event is built into node
6:23but you can also create your own from
6:24scratch we'll import an event emitter
6:27from the events module that is built
6:28into node and we'll look at modules in
6:30more detail in just a minute we can
6:32create a custom event emitter by
6:34instantiating the class and then we'll
6:35register a call back that fires on the
6:37lunch event now that the call back is
6:39registered you can simply call event
6:41emitter emit with that event name and
6:44that triggers your call back function to
6:45run as you can see here we emit the
6:47event twice which will run the Callback
6:49function twice this event driven style
6:52of programming is extremely useful when
6:53you have something that is CPU intensive
6:56and with that we can move on to step six
6:58the file system node has a built-in file
7:00system module called FS it can read
7:02write and delete files on the file
7:04system among other things and it can
7:06also do things in a blocking or
7:07non-blocking way allow me to explain
7:09that by showing you an example first
7:12create a file on the file system called
7:14hello.txt and then add whatever text you
7:16want inside of it in our JavaScript code
7:19we'll import two functions from the file
7:20system module called read file and read
7:23file sync anytime you see a function
7:25that ends in sync think blocking or in
7:27other words it will need to finish all
7:28of its work before any any of your other
7:30code can run we can read a text file in
7:32node by simply passing the path to that
7:34file and we'll specify the encoding as
7:37utf8 now reading a file might take a
7:39while especially if it's a very large
7:41file and what you'll notice here when we
7:42run our code is that the second console
7:44log won't run until after that file has
7:46been read luckily you can make your code
7:48non-blocking by refactoring this to a
7:50callback with read file we pass the same
7:52first two arguments and then add a
7:54callback function as the third argument
7:56inside the function we can access an
7:58error object if the operation fails
8:00or when successful the actual text from
8:02the file the super cool thing about this
8:04is that even though the console log to
8:06the text file comes first in our script
8:08it's not the thing that gets executed
8:09first node registers the call back
8:11executes the rest of the script and then
8:13finally runs the call back when the file
8:14has been read so that gives us two
8:16different ways to read a file but
8:18there's actually one other way we could
8:19go about this and that's using a promise
8:21based solution promises are also
8:23asynchronous and non-blocking and they
8:25tend to produce much cleaner code when
8:26compared to callbacks notice how in this
8:28example we're importing file from the
8:30promises namespace this gives us a
8:32function that returns a promise when
8:34called if you're using the latest
8:36bleeding edge version of node you could
8:37potentially use this function with top
8:39level a weight which means you can use a
8:40weight to resolve the promise here at
8:42the top of the script however since
8:44we're currently using node version 12
8:46we'll go ahead and wrap this in an async
8:48function and this async await syntax
8:50will make your code much easier to read
8:51especially when you have multiple async
8:53calls in the same function okay so now
8:55that you know how to read files I want
8:57to backtrack a little bit and talk about
8:58this require function that you've seen
9:00me use in the past couple examples step
9:03seven modules a module is nothing more
9:05than a Javascript file that exports its
9:07code note has a bunch of built-in
9:09modules like fs and events that we've
9:11already looked at and there's a long
9:12list of other modules beyond that the
9:14traditional way to import a module in
9:16node is to use this require function but
9:18a quick side note on that first because
9:20node recently added support for ES
9:22modules which Ed the import export
9:24syntax most node.js code out there
9:27written in vanilla JavaScript still uses
9:29require so it's very important for you
9:30to know as a node.js developer and if
9:32all that's confusing to you well all I
9:34can say is welcome to the JavaScript
9:36world let's look at how we can use
9:38modules in our own codebase create a new
9:40file to serve as your module then go
9:42into your index.js file create a
9:44variable for the module and then import
9:46it using require when you console log it
9:48you'll notice that it's currently just
9:49an empty object in order to make a
9:51module useful you need to export some
9:53code from it in the modules file you can
9:55reference this object with module.
9:57exorts you can add new properties to the
10:00object or redefine it as a new object in
10:02either case whatever you add here will
10:04now be available to use in the other
10:05file and as you can see the object is no
10:08longer empty when we console log it but
10:10at some point you'll very likely want to
10:11use somebody else's code out there in
10:13the world and the primary place to do
10:14that is via node package manager or npm
10:17which was recently acquired by GitHub
10:19which itself was recently acquired by
10:20Microsoft when you installed node
10:22earlier in the video it also installed
10:24npm which is a tool you can use to
10:27install remote packages to use in your
10:29own code the first step we'll want to
10:30take is to open the command line and run
10:32npm and nit we'll use the Y flag to use
10:35the default options and what you'll
10:37notice is that it creates a package Json
10:39file here in the root of the application
10:41this file can contain metadata about
10:43your project but most importantly it
10:45keeps track of the dependencies that you
10:46use here at this point we haven't
10:48installed anything yet so let's go ahead
10:50and change that by opening the command
10:51line again and running npm install
10:53Express Express is a minimal web
10:56application framework and one of the
10:57most popular third party node modules
10:59after running the command you'll notice
11:01a few things happened here in the
11:02package Json file it added Express to
11:05the dependencies and pegged it to a
11:06specific version this dependencies
11:08object allows you to manage multiple
11:10dependencies in a project and then
11:11reinstall them all at once on a
11:13different system now the actual raw
11:15source code for the dependency lives in
11:16this node modules directory you should
11:18never have to modify code in the node
11:20modules directory if you find yourself
11:21writing code in here you're probably
11:23doing it wrong that's because the
11:24package Json controls how this directory
11:26is built it fetches your remote packages
11:29Saves The Source here and that process
11:31should be able to be repeated on any
11:32system now that we have this package
11:34installed we can import it by name in
11:36our JavaScript code in this case we
11:38simply require Express and now we've
11:40reached the point where we're ready to
11:41put these seven steps together to build
11:43a real full stack application and deploy
11:45it to the cloud what we're building here
11:47is actually just your typical full stack
11:49web application our server will live on
11:51a URL and when a user makes a request to
11:53this URL in the browser the server will
11:56respond with some HTML in our code we'll
11:58first create an instance of an Express
12:00app an Express app allows us to create
12:02different URLs and endpoints that a user
12:04can navigate to in the browser and then
12:06we Define code for the server to handle
12:08those requests now I don't want to get
12:10too deep into HTTP but when the user
12:12navigates to a URL in the browser it's
12:14what's known as a git request which
12:16means they're requesting some data on
12:17the server and not trying to modify or
12:19update anything on the server with
12:21Express we can set up an endpoint like
12:23that by calling app.get and then the
12:25first argument is the URL that the user
12:27will navigate to in this case we just
12:29use a forward slash for the root URL but
12:32feel free to create multiple Pages for
12:33your web app by creating different URLs
12:36the second argument here is our callback
12:37function you can think of every request
12:39to this URL as an event and then you
12:41handle that event with this function an
12:43Express gives us two parameters to make
12:45use of the request and the response the
12:48request is the incoming data from the
12:50user in this example we don't really
12:52need to parse any data from the request
12:54however in many cases you might want to
12:55look at the headers or the body of the
12:57request to authenticate a user or
12:59understand what the user is trying to do
13:01at this point we need to implement the
13:03code to handle the request what we want
13:05to do is read some HTML from our file
13:07system and then send it back down to the
13:09browser as you can see here I'm creating
13:11a file called home.html with just some
13:14generic HTML markup inside in our source
13:17code we can then import read file from
13:19node's file system module just like we
13:21did earlier we'll read the file use utf8
13:24encoding then in our callback function
13:27here we'll have access to the HTML
13:28string and we can send a response back
13:31down to the client by calling response.
13:33send and also if there's an error in the
13:35call back we can handle that by sending
13:37a response with a status code of 500
13:40which means a server error so the user
13:42knows that something went wrong on the
13:44server and that's all there is to it we
13:46now have a way to send HTML from the
13:48server to the client now we just need to
13:50tell our Express app to start listening
13:52to incoming requests we do that by
13:54defining a port which will normally come
13:56from a node environment variable then we
13:58call app. listen with that port and when
14:00it starts up we console log that the app
14:02is available on Local Host 3000 you can
14:05start it up by opening the command line
14:07and running node with the current
14:08working directory if you go ahead and
14:10open it in the browser you should see
14:12your HTML return back to you now there
14:14is one important thing you should know
14:16at this point and that's that callbacks
14:17can be very difficult to work with
14:19especially as your app grows in
14:20complexity it often leads to a state
14:22known as callback hell where you have a
14:24bunch of callbacks nested within
14:25callbacks within more callbacks and so
14:27on a great way toid code like this is to
14:30use promises instead of callbacks and
14:32that's very easy to do in node.js
14:34instead of importing read file from FS
14:37we'll import it from fs. promises we can
14:40make our callback function async and
14:42then we can write the response in a
14:43single line of Code by saying response
14:45send and then await the operation to
14:47read file that's much more concise and
14:49readable but it's especially useful when
14:51you have multiple async operations to
14:53handle in a single request so now that
14:55we've built a nodejs app how do we
14:57deploy it to the cloud so people can
14:58actually use it there's a bunch of
15:00different ways we could do it but an
15:01easy and free way is with Google app
15:03engine app engine has what's known as a
15:05standard environment for node.js up to
15:07version 12 and what that does is provide
15:09you with a server in the cloud that
15:11scales automatically based on the
15:13incoming traffic to your app it's
15:15incredibly easy to set up but you first
15:17need to have a Google Cloud platform
15:18account and also the Google Cloud
15:21command line tools installed on your
15:22local system once you have that done you
15:24can simply go into your source code and
15:26create an app.yaml file this file is to
15:29configure your Cloud Server the only
15:31thing we need at this point is to
15:32specify a runtime of node.js version 12
15:35app engine will run your code by looking
15:37in the package Json file for a start
15:39script so let's go in there and Define a
15:41start script that runs node in the
15:43current working directory to start our
15:45Express app from there we can simply
15:47open the command line and run gcloud app
15:49deploy that'll take a minute and then it
15:51will give you a URL where you can access
15:53your app publicly on the web
15:55congratulations you're now a full stack
15:57Cloud architect
16:00if this video helped you please like And
16:02subscribe and if you really want to dive
16:03deep into node.js and express consider
16:05becoming a pro member at fireship iio I
16:07have a whole bunch of advanced content
16:09covering real world use cases with these
16:11Technologies thanks for watching and I
16:13will see you in the next one
16:16[Music]