Node.js Tutorial: A Beginner’s Guide
In this tutorial, I’ll teach you the basics of Node.js. Not only will you learn what Node is and what you can do with it, but you’ll see Node in action. We’ll build a simple application for a video rental store using Node, Express, Angular and MongoDB.
At a minimum, I’m assuming you have some web development experience. So you should know a bit of Javascript, HTML, and CSS, and have some familiarity with a web application framework such as ASP.NET MVC, PHP, Python or Rails. As far as Node, Express, Angular and MongoDB are concerned, I’m assuming you’re a beginner and that’s why you’re reading this tutorial. So, I’ll cover all these technologies from the ground up. If you do happen to have some experience with Angular and MongoDB, you can read this tutorial faster.
So, What Is Node?
Node is an open-source, cross-platform runtime environment for executing Javascript code. It’s built on the Google V8 Javascript engine, which is the execution engine for Google Chrome and is extremely fast. V8 compiles Javascript code to native machine code.
Before Node, Javascript was only executed in browsers. In 2009, Ryan Dahl used the open-source Google V8 Javascript engine to build Node as a runtime environment for Javascript outside a browser. This made it possible for Javascript developers to use Javascript on the server, mostly in building real-time Web APIs.
The Job Market
Node is gaining a lot of popularity these days and many big companies (such as IBM, Microsoft, Yahoo, LinkedIn, PayPal) have started adopting it.
As you can see from the following job trends on Indeed.com, demand for Node.js developers is increasing very fast.
Note that in terms of volume, Node developers are not as in demand as Ruby on Rails and many other frameworks, but I think that will change soon.
In 2013, as explained on their blog, PayPal moved from Java to Node.js. LinkedIn also moved from Rails to Node.
I personally think the future of web will be Node. These days we’re getting more and more connected and real-time systems and less need for the users to refresh their browsers and wait for seconds when switching from one page to another. With support from the open-source community, Node is and will be the preferred technology for building fast, connected and real-time applications.
I Love Node Because…
I’m one of the early adopters of ASP.NET MVC and been developing web applications using this framework for several years. One thing that has always put me off about ASP.NET MVC is the radical shift of the language, programming style and conventions from the server-side to the client-side code. While C# and Javascript are both C-like languages, programming with C# is fundamentally different from Javascript. That’s why a lot of ASP.NET web developers are often more skilled at one of these two languages but not both, and so they classify themselves as more of a “back-end” or “front-end” developer. The same applies to Ruby on Rails, PHP, Python, etc.
With Node, however, you use Javascript everywhere, on the server and on the client. This means cleaner and more consistent code base and fewer conversions and mappings. Also, one good Javascript developer can write both the server-side and the client-side code equally well.
When to Use Node?
Node is not a silver bullet. It’s designed for I/O-intensive operations and shines in building fast, scalable and real-time network applications. Examples of these applications are online games, collaboration tools, chat systems, etc. With Node, you can serve a great many clients with minimal system resources, and that’s why it’s designed for high scalability.
Node is also an excellent choice for building APIs on top of a document database like MongoDB. You store your documents as JSON objects in Mongo and expose them via a RESTful API. No need to convert between JSON and other types when reading or writing from your database. In this tutorial, we’ll build a Node application with this style of architecture.
Node, due to its architecture, should not be used for CPU-intensive operations. For this tutorial, since my focus is to show Node in action, I won’t get into architecture of Node and why it shouldn’t be used for CPU-intensive applications. That’s something that I’ll cover in my comprehensive Node course that I’ll publish on Udemy soon. If you’re interested, be sure to subscribe to my mailing list (details are at the end of this tutorial).
The MEAN Stack
There are many choices for building Node applications, but the MEAN stack has increased in popularity lately. MEAN stands for:
MongoDB: the database engine we use to store the data.
Express.js: the server-side framework for building web applications, similar to ASP.NET MVC or Rails.
Angular: the front-end framework for building web applications
Node.js: the Javascript runtime environment
With MEAN, you store your documents in a JSON-like format in MongoDB and expose them via a RESTful API that you build with Express and Node. You build a client with Angular to consume this API and render views to the user. This means that you use a single, unified language (Javascript) throughout your code, which results in more consistent and maintainable code. Plus, you spend less time dealing with conversions from JSON to other types. All of this results in better performance and increased developer productivity.
If you’ve never worked with MongoDB or Angular, don’t worry at all. I’ll teach you the basics of these technologies as part of this tutorial.
Okay, enough theory. I believe it’s time to get our hands dirty in the code and build an application using the MEAN stack.
Setting Up the Environment
Before we get started, there are a few tools you need to install in order to develop MEAN applications. Installing all these tools takes 15 – 20 minutes. Once you do it, you’ll have a proper environment for developing MEAN applications and you never have to go through these steps ever again.
So go ahead and install each tool in the order I’ve listed here. If you already have some of these tools (e.g., Sublime Text, MongoDb), you can skip that section.
Install Sublime Text
Sublime Text is a very lightweight and sophisticated code editor. You can use any editor to build node applications, but if you haven’t used Sublime, I recommend you to give it a try. To get Sublime, go to: http://sublimetext.com
Install Mongo
Go to http://mongodb.org and click Download MongoDB. Follow their documentation for installing Mongo. It’s very easy and unlike SQL Server, which takes half an hour or so, installing Mongo takes only a minute or two.
Once you install Mongo, there a few simple steps you need to follow to run it. You need to create a directory where Mongo will store database files. This directory should have write permissions for the current user. Then, you need to run MongoD (Mongo Daemon), which is a background process that handles data requests.
By default, MongoD expects the data directory to be /data/db in the root of your drive. I’d suggest that you keep the defaults for the purpose of this tutorial. But if you really have to change it, check out their complete instructions on their website on the download page.
Let’s stick to the defaults and run Mongo:
For Windows users:
Open Command Prompt as an administrator:
Note that you can run MongoD as a Windows Service, so you don’t have to run it from the Command Prompt every time. The details are in the instructions on MongoDB website.
You may get a pop-up about MongoD listening for network connections. Give access to MongoD.
For Mac users:
Open Terminal:
You should see MongoD running in the Command Prompt or Terminal and waiting for connections.
If you encounter any issues running MongoD, it’s best to check MongoDB’s website for complete installation.
Install Node
Simply hit https://nodejs.org and click the Install button. Whether you’re using Windows or Mac, it’s very straightforward and you won’t have any problems.
As part of installing Node, you’ll get NPM (Node Package Manager) on your machine. NPM in Node is similar to Ruby Gems in Ruby and NuGet in .NET. We use NPM (or any package managers) to download and install open-source reusable packages / modules in our applications.
Install Express Generator
Express Generator is a Node module that we use to scaffold an application. To install Express Generator, open another Terminal on Mac or Command Prompton Windows and run:
The -g switch here instructs NPM to install this package at the global level so it’ll be accessible to all your applications.
Scaffold a Project
We got all the tooling ready. Now let’s build an application skeleton using Express Generator. We’re going to call our video rental store application Vidzy. So, from the Command Prompt or Terminal, go to a folder on your disk where you create your projects, and run the following command:
Express Generator will scaffold an application under a new folder called Vidzy.
Now, open the Vidzy folder in your favorite code editor. If you’re using Sublime, you can simply drag and drop this folder into Sublime.
Here is the generated app structure:
bin
www
public
images
javascripts
stylesheets
routes
index.js
users.js
views
error.jade
index.jade
layout.jade
app.js
package.son
public is where we store public assets of our website, such as javascript files, stylesheets, images, etc.
routes includes a number of Javascript files, each defining routes and their handlers for a given module in your application. A route defines an endpoint in your application where you receive requests. We’ll take a look at routes soon.
views includes the view files for your application. Express supports many popular template engines such as Jade, Haml, EJS, Handlebars, etc. Jade is the default template engine.
app.js is the entry point to your application. It’s where your application is defined and configured.
package.json: every Node application has a package.json file, which includes application metadata and identifies application dependencies.
Let’s open package.json. Here you see a JSON object like the following:
As you see, here we specify the name and the version of our application as well as its dependencies. All of these dependencies are Node modules.
Install Dependencies
When you generate an application with Express Generator, these dependencies are not installed. They are only referenced in package.json. You need to separately install these dependencies.
To install the dependencies, go back into the Terminal or Command Prompt and run the following commands:
This is going to take a little while to run. NPM will look at package.json to identify the dependencies. Then, it will download each of these dependencies from NPM directory and store them in a folder called node_modules. Let’s take a look at one of these modules.
Inside Vidzy folder, go to node_modules > express. Note that here we have another package.json, which identifies the dependencies for Express.js. Also, there is another node_modules folder, which is where these dependencies are stored. This is a common structure of Node applications. Every module or package has apackage.json file and a node_modules folder.
Install Nodemon
When you start a Node application, a basic web server starts on port 3000 and accepts incoming requests. If you make any changes to your application code, these changes are not visible in your web server until you restart it. Doing so is a bit tedious as you have to kill the server and start it again from the command prompt. To solve this problem, we use Nodemon, which is yet another Node module that automatically restarts your web server whenever it detects any changes in your source files.
To install Nodemon:
Install Monk
Monk is a Node module for reading and writing documents in MongoDB.
To install monk:
The –save switch here instructs NPM to add this dependency in your package.json. The benefit of this is that if you push this application to a repository, and someone else checks it out (or it could be yourself at some other time), all dependencies of your application are referenced in package.json. Then, all you have to do is simply run npm install, and this will automatically install all the referenced modules. This is exactly what we did earlier once we generated our application skeleton.
Run the Application
Congratulations! We’ve installed all the required tools. Now, it’s time to run our sample application. From the Command Prompt or Terminal, run the following command inside the Vidzy folder:
Nodemon will start your web server on port 3000. You may receive a pop-up warning you that Node is going to access incoming connections. Make sure to allow access.
Now, launch your browser and navigate to:
http://localhost:3000
Here is your first express application.
Over the next few sections, we’ll build various features for our video rental store app.
Displaying All Videos in the Database
First, let’s start by implementing a simple feature: displaying all videos in the database on the home page. There are different ways to implement this. We can start from the front end and work all the way up to the back end, or vice versa. There is no right or wrong way but in this tutorial, I prefer to start from the back end for educational reasons.
We’re going to implement this feature in a few steps:
We’ll create a database in Mongo and populate it with a few video documents.
Then, we’ll create an API with Express to expose the videos in the database.
Finally, we’ll use Angular to consume the API and display the list of videos.
If you don’t have any experience with any of these technologies, that’s perfectly fine. In this section, I’ll cover all of these from the basics. However, depending on your level of experience, there might be a bit of learning curve. Please be patient, and once we get to implement the next few features, everything will become easier as you re-apply these concepts.
Step 1: Populating the Database
How do we populate our MongoDB database with some documents? MongoDB has a shell that you can access using Terminal on Mac or Command Prompt on Windows. However, working with shell is not very user-friendly. So, to make our job easier, we’re going to use a free tool called RoboMongo. Head over to http://robomongo.org and download RoboMongo for your operating system.
Lunch RoboMongo. You’ll see a dialog box for connecting to a MongoDB server.
Click the Create link on the top.
Change the name of this connection from New Connection to localhost. Note the address of the connection. It points to localhost:27017. By default, MongoDB starts on port 27017.
If you click the Test button, you may get an error like “Authorization skipped by you”. Don’t worry about it. You’ll be able to connect to your local MongoDB regardless.
Save the connection settings. Back in the Connect dialog box, connect to localhost.
From the View menu, tick Explorer if it’s not already ticked. Now your RoboMongo should look like this:
In the Explorer pane, right-click on localhost and select Create Database. Name the database vidzy. Expand vidzy, right-click Collections and click Create Collection… A collection in MongoDB database is similar to a table in a relational database. Name this collection videos. The new collection should appear in the list.
Next, right-click the videos collection and select Insert Document. A document in MongoDB is kind of similar to a record in a relational database. However, a MongoDb document, unlike a relational record, can contain other documents. In Mongo, we use the JSON format to represent a document. Copy and paste the following code into the dialog to add a video document:
Note: Make sure to clear the content of the dialog first before pasting this document, as otherwise you’ll get an invalid JSON object.
Repeat this step and add two more documents to the videos collection:
Now, right-click the videos collection, and select View Documents. You should see three documents in the videos collection.
Note that each document has an ID that is automatically generated by MongoDB.
Done! Our database is ready. Now, let’s create an API using Express to expose these video documents.
Step 2: Creating an API with Express
In this step, you’re going to learn about Node module system, Express routes and getting data from MongoDB using Monk.
In your favorite code editor, open app.js in the root of the project folder. The first section includes a number of require calls. The require method is one of built-in methods in Node that we use to import modules defined in other files:
The second section imports our route module. A route module defines one or more related endpoints and their handlers. In the sample application generated by Express Generator, we have two route modules: index and users:
Let’s take a look at one of these route modules. Open routes > index.js. You should see the following code:
Let me break this down for you.
With the first line, we import Express into this module. When using the requiremethod, depending on how the target module is implemented, the require method may return an object or a method. In this case, the express variable is an object. It exposes a method called Router, which we call on the second line, to get access to the router object in Express. We use a router to define endpoints for our application. These are the endpoints where we receive requests. Each endpoint will be associated with a route handler, which is responsible for handling a request that is received in that endpoint.
Now look at the next line for an example of a route configuration.
Here, we use the get method on the router to define a route and its handler. The first argument is the endpoint; in this case, ‘/’ represents the root of the site or the home page. The second argument is the route handler.
In Express, all route handlers have the same signature. The first parameter is therequest object, the second is the response, and the third references the nexthandler in the chain. Express uses middleware functions that are chained together. When building middleware with Express, sometimes you may want to call the next middleware function in the chain. You can use the next variable for that. But when working with routes, we hardly ever need to do this, so you can safely delete the next variable here.
Now, look at the body of this method. The res variable represents the response. The response object has a number of useful methods:
render: to render a view
send: to send plain text content to the client
json: to send a json object to the client
redirect: to redirect the client to a new address
Here, we render the index view, which is defined in views > index.jade.
This is the basic structure of a route. Now, we need to create a RESTful API for our videos. We’re going to expose our videos at an endpoint like /api/videos.
Create a new route module called videos.js under routes folder, and type the following code into it. Don’t worry, as I’ll explain it line by line.
The first two lines are like before. We’re importing Express and getting the router object.
Next, we import Monk, which is a persistence module over MongoDB. There is another popular persistence module for working with Mongo called Mongoose.But in this tutorial, I preferred to use Monk as it’s easier than Mongoose.
Earlier I told you that depending on how a module is implemented, the requiremethod may return an object or a method. Here, when we import Monk, we receive a method, and not an object. So, the monk variable is a method that we call to get access to our database:
Now, look at the implementation of our route handler.
First we call the get method on the db object, passing the name of the collection (videos). It returns a collection object. This collection object provides a number of methods to work with documents in that collection.
insert
find
findOne
update
remove
Here, we use the find method to get all videos in the collection. The first argument to this method is an object that determines the criteria for filtering. Since we want all videos, we pass an empty object as the argument. The second argument is a callback method that is executed when the result is returned from the database. This method follows the “error-first” callback pattern, which is the standard protocol for callback methods in Node. With this pattern, the first argument of a callback method should be an error object, and the second should be the result (if any). As you develop more applications with Node, you’re going to see more of this callback pattern.
Inside this callback, first we check if the err object is set. If there are no errors as part of getting the video documents, err will be null; otherwise it will be set. We throw the err here to stop the execution of the program and report an error to the user. If there are no errors, however, we simply return a JSON object by callingres.json method.
Finally, look at the last line of this module:
With this line, we specify the object (or method) that is returned when we requirethis module in another module. In this case, we’re returning the router object in Express. So, the purpose of this module is to get the router, register a few routes on it, and then return it.
There is one tiny step left. We built a module for configuring routes for our new API, but we haven’t used this module anywhere. Open up app.js again and look for the following code near the top:
This is where we import our route modules into the application module. Add a new line to this section:
We’re importing our new module and storing it in a variable called videos. Next, we need to use it. Scroll down in app.js a little bit and find the following section:
Add a new line to this section:
With this line we tell Express to use the videos module for any routes starting with/api/videos.
We’re done. Let’s quickly test our new API. Open up your browser, and navigate to http://localhost:3000/api/videos. You should see all videos represented as JSON.
I’m using the JSONView plugin in my Google Chrome to highlight JSON objects.
Over the next few steps, we’ll build the front end using Angular to display these videos.
Step 3: Adding Angular
In this step, you’re going to learn the basics of Angular. If you’re already familiar with Angular, you can skip through the explanations, but be sure to apply all code changes.
Angular is a popular front-end framework for building Single Page Applications (SPA). It provides routing, dependency injection, testability and clean separation of concerns by adhering to MVC architectural pattern. If all this sounds too geeky, don’t worry at all. You’re going to see most of these capabilities in this section.
First, we need to add Angular scripts to our application. Go to views > layout.jadeand add these three script references at the end of the head section.
Make sure they are at the same indentation level as previous lines since Jade (the default templating engine in Express) is very sensitive about white space. The Jade views generated by Express Generator use two white space characters for indenting. So, you need to follow the same and you cannot mix this with tabs in the same view. Otherwise, you’re going to get a runtime error.
What are these scripts? The first one is the main Angular framework, the second one (angular-resource) is used for consuming RESTful APIs, and the third one (angular-route) is used for routing. With routing we define what the user should see as they navigate through the application.
Next, create a new file called vidzy.js under public > javascripts. We’ll write all our Javascript code here.
Add a reference to vidzy.js in layout.jade just after Angular scripts:
Again, make sure that this line is at the same indentation level as other script references in the head section.
Now that we’ve got the necessary scripts in place, it’s time to add Angular to our application. Adding Angular involves two steps:
First, we add the ng-app attribute to our HTML element. When the Angular script is loaded, it’ll look for this attribute in the DOM and if it finds it, it’ll hook itself into your application.
Next, we create an Angular module for our application. Angular applications consist of one or more modules. With a simple application, you’ll have one module called app. But as your application grows, you may want to divide various functionalities into different modules for better organization and maintainability.
With layout.jade still open in your code editor, add ng-app to the html element near the top:
In Jade, we use parentheses for adding attributes to an HTML tag. When this line is rendered by Jade template engine, we’ll get an HTML element like the following:
The value we set for ng-app is the name of our application module that kicks off the application. Now we need to create this module.
Open vidzy.js and write this code:
The angular object is available in the global space, so it’s everywhere. The modulemethod can be used to define a new module or get a reference to an existing one. The first argument is the name of the module. This is the same name we used withng-app above. The second argument is an array of dependencies. If you provide this argument, the module method will define a new module and return a reference to it. If you exclude it, it’ll attempt to get a reference to an existing module. Here, I’m passing an empty array to indicate that this module does not depend on any other modules.
That was all we had to do to hook Angular into our application. Next, we’re going to re-build our home page using Angular to display all videos in the database.
Step 4: Rebuilding the Home Page using Angular
The default application generated by Express Generator uses Jade as the view engine. These Jade views are parsed and rendered on the server, and HTML markup is returned to the client. This is how a lot of web frameworks work out of the box. But in this application, we’ll be using a different architectural style. Instead of returning HTML markup to the client, we’ll return plain JSON objects and let the client (Angular) render the view. Let me explain why.
Earlier, in the section about “When to use Node”, I mentioned that a common scenario that Node excelled at was building RESTful APIs over a document database. With this architectural style, we don’t have any overhead of data conversion. We store JSON objects in Mongo, expose them via a RESTful API and consume them directly on the client (in Angular). JSON is native to Javascript and MongoDB. So, by using it throughout the stack, we reduce the overhead of mapping or converting it to other types. By returning JSON objects from our API and rendering views on the client, we can improve performance and scalability because servers’ CPUs will not be wasted to render views for lots of concurrent users. Plus, we can reuse the same API to build another client, like an iPhone or Android app.
In this step, we’re going to retire our default home page that is built with a Jade view, and instead use an Angular view.
Create a new folder under public called partials. We will store all our views here. Create a new file under this folder called home.html. In this file, simply type:
Now, we need to tell Angular to render this view when the user navigates to the home page. We use Angular routes for this.
In vidzy.js, change the declaration of app module as follows:
I added a reference to ngRoute module in the array of dependencies. ngRoute is one of the built-in Angular modules for configuring routes.
Write the following code after declaration of the app module:
Let me break this down for you. We’re using the config method of the app module to provide configuration for our application. This code will be run as soon as Angular detects ng-app and tries to start up. The config method expects an array:
This array can have zero or more dependencies, and a function for implementing configuration. Here, we have a dependency on $routeProvider, which is a service defined in the ngRoute module. That’s why we changed our app module declaration to depend on ngRoute. Our configuration function receives$routeProvider as a parameter.
Inside our configuration function, we use the when method of $routeProvider to configure a route.
The first argument (‘/’) is the relative path. The second argument is an object that specifies the path to the view (via templateUrl). We can have multiple calls to thewhen method, each specifying a different route. Finally, we use the otherwisemethod to indicate that if user navigates to any other URLs, they should be redirected to the root (‘/’).
We’re almost there. We just need to make a few small changes to the Jade view for the home page. So, open views > index.jade and change the content of this file as follows:
I removed the existing content in this view (Welcome to Express) and instead added a div with the attribute ng-view. This attribute tells Angular where to render views. With this, the first time the user hits the home page, our Jade view will be rendered on the server and returned to the client. In a real-world application, this view will have the basic template for the site (e.g., navigation bars, logos, etc.). It will also have a content area (indicated by ng-view) for Angular to render views. As the user navigates through the application, Angular will replace the content area with a different Angular view. This prevents a full-page reload and results in better performance. That’s why we call these applications Single Page Applications: there is essentially one single page downloaded entirely from the server, and any subsequent pages were simply replacement of the content area.
Note: Again, I need to emphasize one more time that Jade is very sensitive about the white space character. You cannot mix space and tab for indentation in the same view. The default Jade views generated by Express Generator use two white space characters for indentation. So, make sure to add two white space characters before div(ng-view) or you may get a runtime parsing error.
Let’s do a quick test before implementing the final step. Back in your browser, navigate to http://localhost:3000. You should see our new home page built with Angular:
Step 5: Implementing the Controller
The home page is properly hooked in. Now we need to get the videos from the server and render them on the home page. In Angular, or any other MVC controllers, this is the responsibility of the controller. A view is purely responsible for presentation, while a controller is responsible for getting the data for the view, or handling the events raised from the view (e.g., clicks of buttons, etc.).
Let’s create a controller for our home view. Open vidzy.js and change the declaration of the app module as follows:
Now we depend on two modules: ngResource, for consuming RESTful APIs andngRoute for routing.
Next, type the following code at the end of the file to create a controller:
Let me break this down for you.
Here we’re using the controller method of the app module to define a new controller.
The first parameter is a string that specifies the name of this controller. By convention, we append Ctrl to our Angular controller names.
The second argument is an array. This array can include zero or more strings, each representing a dependency for this controller. Here, we’re specifying a dependency to $scope and $resource. Both of these are built-in Angular services, and that’s why they are prefixed with a $ sign. We’ll use $scope to pass data to the view and $resource to consume a RESTful API. The last object in this array of dependencies is a function that represents the body or implementation of the controller. In this example, our function gets two parameters called $scope and$resource. This is because we referenced $scope and $resource before declaring this function.
Let’s implement the body of this controller. Inside the controller function, type the following code:
Here, we call the $resource method to get a resource object for the given API endpoint (/api/videos). This object will provide methods to work with our API. We use the query method to get all videos. The query method gets a callback method that will be executed when the query result is ready. This function will receive the videos we retrieved from the server. Finally, we store these videos in$scope so that we can access them in the view for rendering. Remember, $scope is the glue between views and controllers.
Now, we need to change the view to render the list of views. Open partials > home.html and write the following code:
We’re using a UL and LI to render the list of videos. Our LI has an Angular-specific attribute called ng-repeat. These attributes in Angular are called directives and are used to add behavior to HTML elements. The value of ng-repeat is an expression similar to a foreach expression in Javascript. So, videos is essentially the property we set in the $scope earlier in the controller. video in videos represents one video at a time in this array. So, this LI element will be repeated for each video in the videos array. We use {{ }} to write expressions. Here, we simply render the title of each video in our LI.
Finally, we need to register this controller as part of the route. Back in vidzy.js, change the route configuration as follows:
With this, we’re telling Angular that when the user navigates to the root of the site, display partials/home.html and attach HomeCtrl controller to it.
We’re done. Go back to the browser and refresh the home page. You should see the list of videos.
If you’re new to Angular and are a little confused, that’s perfectly fine. We’ll work with Angular controllers, views and routes more in the next few sections.
Let’s quickly recap. In this section we added the first feature to our application. We started by using RoboMongo to connect to MongoDB. We created a database and populated it with a few video documents. Then, we created an API using Express to expose the list of videos. Finally, we added Angular to our application and consumed our API to render the list of videos.
In the next section, we’ll add another feature to our application.
Adding a New Video
In this section, you’re going to learn more about creating API endpoints with Express, building forms using Angular, and storing documents in Mongo using Monk.
Similar to the last section, we’re going to implement this feature in a few steps from the back end to the front end. First, we’ll create an API endpoint for adding videos. We’ll use Express routes to create this endpoint and Monk to store a video document in Mongo. Then, we’ll create a new page with a