Write a Node.js App with MongoDB

[00:00:00]
>> We're gonna pop into writing a Node.js app with MongoDB. Let's go ahead and open this one. And we're not gonna learn any new concepts here with write a Node app with MongoDB. But I wanted to make sure that you are able to transfer the skills that you learn from just writing commands into a command line, which is fun for querying, but obviously not useful for writing applications.

[00:00:24]
I just wanna make sure you could transfer that into code, right? So we're just gonna write a really quick, really dumb MongoDB app. So what I want you to do is, I want you to come back over here. Don't shut down your Mongo server, I'll show you how to do that here in just a second.

[00:00:39]
I'm just gonna open a new terminal. So I have a directory called personal/complete-intro-to-databases. So you can see here, I just have an empty database, or sorry, I also have an empty database, but I have an empty directory. I'm just gonna start a new Node project here. So I'm gonna make a directory, and this will be called mongodb-sample or something like that.

[00:01:09]
One note actually I wanna add here. If you come here to the course website, I have a repo here, db-samples, this has the complete code for all of the samples in this course. So if you wanna just go clone that and use that, that's fine. We're gonna be writing all the code together so you don't have to clone it.

[00:01:28]
But if you get lost, you can obviously just come in here, and you can see what's in the package.json, blah, blah, blah. It's all there for you to use as well, so that's at btholt/db-samples, and there's a link right there as well. So coming back over here, what we're gonna do is, we're gonna do an npm init -y.

[00:01:48]
This will give us a new package.json, the -y just means I don't really care what things you put in it. And here, I'm gonna install, express, let's get a specific version of express, I'll figure out which one it is. So we're gonna grab express at 4.17.1. We're gonna install mongodb at 3.6.2, I already had an express there, so I have it in there twice.

[00:02:25]
Again, the reason why I'm giving you specific versions for this is that, if someone's watching this course in the future, that they're getting the same versions as me. I've been bit by this before where I'll write code for something. And then later, they update the framework to be totally different.

[00:02:38]
I don't want that to happen, so yeah, just go ahead and grab these specific versions. Or if you wanted to grab the latest versions, just know that some things might be different, and you might have to adjust for that. The first thing that people will probably ask me is, hey Brian, why are you not using mongoose, right, why are you using MongoDB?

[00:02:55]
Totally valid question. mongoose is a very popular library for interacting with MongoDB. And in Node specifically, it's what you would call an ORM, which I believe stands for object-relation manager, something like that, I honestly couldn't tell you. It's an ORM, that's the thing that I know it as.

[00:03:18]
An ORM basically allows you to use the library, and then the library constructs the queries for you. So it's a layer of indirection between you and the database. This is useful sometimes for some people because it helps them make good choices, when they don't know how to make the good choices.

[00:03:35]
I'm trying to teach you how to make the good choices yourself. So we're gonna be using MongoDB, which is the official driver from Mongo itself. You'll notice I use the term driver. Driver's kind of the word that you use to describe the library that's made to interact with the database.

[00:03:53]
So there's gonna be a Ruby driver, a Python driver, a Go driver, all for MongoDB. So MongoDB is the official one for MongoDB that's put out by MongoDB themselves, mongoose is an unofficial community source one. It's great if that's what you want, if you want an ORM, go ahead and go use them.

[00:04:13]
I just never use them personally, so I'm gonna not teach you those today. Okay, so now we have all that, I want you to make a directory called static, make directory static. We're just gonna put our index.html in there. And then we're gonna create two files here. We're gonna put one in static called index.html.

[00:04:35]
And then we're also gonna create one in server.js. touch just creates a file. So now if you look here, let's do this. You can see here, I have a node_modules, I have a package-lock, a package.json, the server.js, and the static directory. Inside of that static directory, you can see there I have an index.html.

[00:04:54]
Pretty barebones project, we're gonna make this very simple. This is definitely not a Node.js course, so the code here is going to be very barebones. If you want a good Node course, you should take Scott Moss's on Frontend Masters. All right, so I'm gonna open this in my favorite editor, obviously, [LAUGH] which is gonna be VS Code, seeing as that's what I work on.

[00:05:17]
So I'm gonna say code .. And let's make this big, and we're gonna look first at our index.html. Make this a bit bigger for you, gonna hide that, all right. So we're in our index.html, I'm gonna put html:5. And then if I hit Tab, VS Code is going to autocomplete this out to a barebones HTML document.

[00:05:47]
It's called Emmet, feel free to look that up, E-M-M-E-T. And I'm gonna call this my MongoDB Sample App. Okay, we're gonna make a very barebones, all this is gonna do is, we're gonna take advantage of that full text search that we created in one of our previous sections.

[00:06:16]
So again, no CSS, super barebones. This is just to be a sample application where you can see how to connect a frontend to a database through a Node server. So let's put an input in here, and this is gonna be type text. The placeholder is gonna be equal to Search, and the id is going to equal search.

[00:06:37]
Search, I can spell. Okay, underneath that, we're gonna have a button, id is going to equal btn, and the code here is gonna say Search. And then we're gonna have a pre, which is a pre format tag. And inside of that, we're going to have a code which is gonna be code format, cuz we're just gonna literally paste JSON in here.

[00:07:09]
We're not gonna any formatting or anything like that. I just want you to see what it looks like, and this is gonna be id="code". Now normally, I would say, create a separate script file, we'll start a build process, blah, blah, blah. I'm just literally gonna put this in a script tag right now so that there's no way that you can get lost here.

[00:07:28]
So we're literally just gonna write JavaScript in a script tag here. const button, we're gonna go query for all of our various different things that we just created. document.getElementById('btn'), and then we're gonna do that two more times. So once, Once for that, once for code, right? So code is gonna be the this code element here.

[00:08:01]
And then we're gonna do it as well for the search. So search search, code code, so this is just gonna be a programmatic handle on these three different elements up here, okay? Underneath that, we're gonna say btn.addEventListener. So on click, sorry, let me hide this again. Okay, so btn.addEventListener('click').

[00:08:42]
Okay, and then we're gonna make an async function here. So whenever someone clicks that code button, we're gonna say, code.innerText = 'loading', so that someone knows that it's loading. And then we're gonna say const res = await fetch, and we're gonna get it from, /get?search=, + encodeURIComponent(search.value). No semicolon.

[00:09:41]
Okay. So what this is gonna do is, as soon as someone clicks the button, it's gonna grab the value out of search. It's going to attach that onto a /get with a query string of search=blah, right? And then we're gonna take that in the Node server, and we're gonna use that to search our Mongo database.

[00:10:04]
Okay, here we're gonna say const json = await res.json(). Okay, and then here at this point, we can say, code.innerText =, let's add a new line. "\n" + JSON.stringify(json, null, 4), which is gonna to be just a preformatted JSON object that we're just gonna dump out into the results.

[00:10:41]
So this is extremely barebones, right? What do we expect to see when we open this on the page? An input, a button, and then there'll be nothing in here, just because there's no code in here yet. Then whenever we press the button, it's going to run this event listener, the click event listener.

[00:11:00]
It'll set the text to loading, it'll request to our Node server, which we need to code, we're about to do that. And then it's going to get that and it's going to dump that out into the pre code. So we'll see JSON coming back from our express server that we're about to write.