7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Setting Up the Server

Sending up our server application is going to be a little bit more involved than our client. Primarily because there's nothing that's going to automatically generate stuff for us. We have to manually do all of this. So let's just dive right into the command line and we are going to create a new directory called server-app, that follows the naming pattern for our client and we of course want to cd into that directory. The first thing we will do is initialize our NPM project. We're gonna use -Y to go ahead and just answer yes to everything or take the defaults, I should say. And there are quite a few dependencies that we are going to install. The first is going to be nodemon because I want something running in the background watching for changes to the application so that we don't always have to stop it and restart it. So I'm going to install this globally because this is just one of those tools that I would use globally. And when that is complete, we are going to install several other things. The first is of course going to be expressed because well it's Express. The next thing we need is mongoose which is going to allow us to interact with our MongoDB database. We also need Jsonwebtoken, that is what we are going to use for authentication. And we're also going to need to install the cors library because well we are going to be making cross origin requests. So it makes sense to have cors there, we also need to be crypt because we need to encrypt our passwords. Never ever, ever store passwords in plain text even during development because something can slip through into production and you're in for a world of hurt. So always, always, always do something with the passwords either encrypt them or just store the hashes. The more secure option is to just store the hashes, so there you go. Okay, so we have express mongoose, jsonwebtoken, cors, bcrypt, and we also are going to use dotenv, that is where we're going to store all of the settings that we need for our server application, such as the port that we are going to be using. As well as the secret that is used for generating our jsonwebtoken and we will also store our database connection string there as well. So let's save all of this and while that is going on, let's hop on over to the browser, and I mentioned a connection string for our database. Well, we need to to get that, so inside of our cluster. We're gonna click on the connect button here and this is going to pop up this, now we need a user in order to connect to our database. And there isn't one by default, but this is where we can create one. You can also go to the database access and create a user there, but we can do that all right here so we might as well do it. Now as far as the name is concerned, it really doesn't matter, I'm gonna call this, reader user. And as far as the password is concerned, we'll just auto generate that. Now I do need to show this so that we can of course, save that and use that inside of our dotenv file. In fact, let me go ahead and let me just put this inside of a notepad instance. So that we have that and we can go ahead and create that user. And then after that, we will go to the next step, choose a connection method. And we have several options, we want to connect our application. So we will click on that option, and then we have several different options as far as the drivers are concerned, this is of course no JS. So we're going to stick with this and right here, this is the connection string that we need. Now notice that reader user is automatically listed here, that is the user that we created, we're going to put in our password and then we're going to leave everything else. So let's copy that and I'm gonna put that inside of this notepad instance as well so that we can refer to that later. But now, that's it, we have all the information that we need to connect to our database. So let's look at our command line that looks like everything was correctly installed. So let's fire up our code editor and let's start by creating that dotenv file. So let's create that new file and let's start with the port. I believe in the previous lesson, we went ahead and set the port to 4000 or that is what our client application is going to be using. So we will go ahead and set that there then we need our secret phrase. This is used when generating our jsonwebtoken and this can be anything that you want. I typically try to find something that's random, and definitely something that is not guessable, and I guess this could be guessable, but I don't know penguins can't fly, that's what we are going to use here. And then we need the DB string, that's where we are going to store our connection string. And of course, we need to change the password value. So let me go ahead and grab that, so that we can paste that in there and we have our settings for our application, so now we can create the file that we are going to run for our application. And let's just call this app.js, now there are several things that we need to do here. First of all, we need express, so we will go ahead and require express we want to our Mongo DB, because we need to set up that connection here, so we're going to require mongoose from mongoose. We'll go ahead and pull in the cors library because we need to configure our application to use cors. We also want to require dotenv, so that we can pull in those settings. So all we need to do here is just require dotenv and then we will call the config method that is going to allow us to use the process object dotenv, and then whatever value that we have inside of that dotenv file. So now we can create our application by calling the express function. We will also go ahead and connect to our MongoDB, we will use mongooses connect method. And the first thing we need to pass is the DB string value from our dotenv file and there are a few options. The first is going to be useNewurlParser, that is a value that we will set to true. And we also want to useUnifiedTopology, now honestly, I don't know what these things do. I do know, however, that if we attempt to connect to our MongoDB instance, that it will work if we don't have these options, however, we will get some warnings saying that we should probably set those. So that's why we are setting them here, so let me put this on multiple lines so that it's a little bit easier to see what's going on. And then we will set up our application to use cors and we are going to be parsing all of the requests as JSON, so we will also use express.json there, which is nice. We don't need a body parser like we did in previous versions of express. This is built in which is really what it needed to be to begin with and then finally, we are going to listen for requests on our specified port. So we will once again use dotenv, will use the port value and then for our callback function, let's just write a message to the console where we will say that we are listening at and then http://localhost and then we will include our port once again. Now of course we need a route so we can make sure that everything is working like it needs to. So because we are already going to be making a request to the register end point, let's go ahead and do that. Let's create a new folder, we'll call it routes and inside of routes, we will create a new file. We'll call this auth.js and the first thing we need is express, so let's go ahead and require that and we are going to need our router and then we will use our router to create a route that listens for the post request at register. And all we really need to do is just respond with something in the next lesson, we will actually register our user. So I think that we could get away with just returning some Json, which we will use the send method and let's have a message property that is going to have a value of hello world, so that gives us something to at least check. Now we do need to use this route inside of our application. So let's go ahead and let's pull in off routes. We need to export that, don't we, yes, we do. So module exports and we will just set that to router as the default export so that we can just do something like this so that we will pull in our routes off. And then we will use those routes after we configure using cors and the Json parser, so with that in place, we should be able to just fire this up and at least see something working. So let's go to the command line and we will run nodemon app that should get our application up and running. We do have an issue here routers is not a function, so let's go back to off and that is true. That is not we want just router, so we are good to go there. Let's hop on over to the browser, let's go to our application, let's pull up the developer tools. And let's just refresh make sure everything is nice and new and let's clear out. All of the requests that were made, and this information doesn't matter what we are wanting is a response back from the server that has our data. Now once again, we are seeing these two requests and in the previous lesson I mentioned that we will talk about those. Yes, we will, this is normal, it's okay and really all we care about right now is the response. There we go, we have our response. So we have the beginnings of our server side application so that in the next lesson, we will create our user model and we will register our user.

Back to the top