2.2 Creating the Server-Side Entry Point

The next thing we're gonna do is we're going to start to bring in the third party dependencies that we're gonna need for our application. And then we're gonna go ahead and start to introduce the kind of server-side code that's gonna get things up and running any way from a Node and Express standpoint. So that we can start to add into it and create the back-end JavaScript software that we need to actually get this application up and running. So all right, we're gonna take this in two different steps. The first thing we're gonna do is we're gonna install those dependencies. And we're gonna use npm once again, so we're gonna say npm install. And this time we're gonna use --save, which is going to take the dependencies that we're going to specify here, the libraries that we want to install, and it's actually gonna save them in our package.json file, and we'll see that in just a moment. So there's four that we're gonna bring in here. Obviously, if you have done any additional kind of back-end JavaScript development or whatever, feel free to bring in any other libraries that you're comfortable with and that you wanna use. We're just gonna kinda use some basic ones here to get things up and running, and then you can obviously add to this and add in login frameworks and all sorts of things like that if you want to, and that's gonna be just fine as well. So the first thing that we're gonna need to bring in is gonna be Express, because that's gonna be the library that we're gonna use to really get our back-end application up and running and be able to define our API that our front-end Angular app is gonna talk to. So that's gonna be Express. And then with that, we're actually going to install a couple of Express middleware libraries that are going to allow us to do some configuration and manipulation of Express, to do a couple of different things. The first one that we're gonna bring in is known as body parser, or body-parser. Which is just kind of a middleware that's going to actually help us and kind of help us to be able to use strongly typed classes or objects, to be able to pass in and out of Express. So otherwise you'd typically be dealing with JSON objects, and JSON objects are fine, but this just kinda help us to be able to talk in terms of types, and objects, and things like that. So that just is a little bit of a helper. We're also going to bring in CORS, a CORS middleware for Express. A CORS is Cross-Origin Resource Sharing. So basically what this means is, you're typically gonna run into issues If you have your front-end application, in this case Angular, served up from one particular domain or URL, let's say abc.com. And then it's calling, making Ajax requests behind the scenes to another web service or API that lives somewhere else that's served up by a different domain. And by default that's not gonna work, you're gonna run into CORS issues. And in this case we would run into those problems, because our front-end app and our back-end app are actually gonna be served up on different ports, which are basically gonna make things look like they're served up from different domains. And you will start to get errors if you don't do this, so we're gonna bring in CORS to help with that. And then we're also going to use a library that's gonna help us to interact with MongoDB, and that's gonna be the Mongoose library. So those are the four that we're gonna bring in. So lets go ahead and hit Enter here. So then npm is gonna go out, it's going to download those four libraries as well as any other dependencies that we're gonna need for those, they're gonna download and install them locally in our application. So now if I were to come in here and take a look at our package.json file, you're gonna see that some things have changed. I see body-parser in here, I see mongoose, express, and cors, all of these things have been added in as dependencies. So now we have those libraries in there, now we have access to them. So the next thing that we wanna do is we want to create the server-side JavaScript file that's really gonna start up our application, start up our Express application, so that we can start to get this thing up and running. So we're gonna come into the root of our application, and we're gonna create a new file, and you can call this anything you want. We're gonna need to remember what we call it later on, but for now I typically just call it server.js, I think that's the easiest thing to do. And what I want to do now is I want to start building out this application. So the first thing we're going to do is bring in the dependencies that we need, so obviously I'm gonna need to bring in Express. And the way that we do that is we just simply use require, and I'm going to require('express'). Then I'm going to do another one where, this is just kind of the best practice, we're not gonna really probably use this as much. But if you had a lot of static dependencies, like images and custom CSS and things like that, that you want to bring those things in, we're gonna use another library here called path. So we're gonna bring that in, and I'm gonna show you how to do that so you could use those custom kinda static files, even though we're not really gonna be using them here. We're gonna bring in body-parser, so we're gonna say const bodyParser, and we're going to require that library as well. And you'll see, if you're using a quality text editor here, it's going to do some code completion for you, so it knows which libraries have been brought in, so you're gonna start getting a little help of including those. We're going to bring in Mongoose, so we're gonna require('mongoose'). And we're not gonna be using all of these right now, but we're gonna be using them as we go along, so I'm just gonna bring them all in to get started. We're gonna bring in CORS, so let's go ahead and require('cors'). And that's all we're going to need to bring in for now, this is gonna grow as we continue to build out this application. So now we've brought in these libraries, let's go ahead and start to actually get this server application up and running. So the first thing that we're gonna need to do is we're gonna need to define a port that we want this application to run on. So you can pick just about anything, so I'm gonna create a const here called port and I'm just gonna set this to 3000. So I'm gonna use port 3000 for my back-end server application. The only thing I would say is, try to pick something relatively high that's not typically used by other things when it comes to network development, so 3000 is pretty safe. Also don't pick 4200, because by default your Angular application is gonna be running on port 4200, so I would avoid that one as well. So now let's create an instance of Express, so we're gonna say const app = express(), like that. So now we have an instance of Express, and now we can start to use some of these things, some of these libraries that we brought in for their middleware capabilities. So I can say app.use, and the first thing that I'm gonna say is, I want to use cors. Cuz once again, I want to be able to use these cross-origin requests, I wanna be able to call one domain from another domain from my front-end application. Now I also want to bring in the body-parser framework, so now I'm going to do a couple of things here. I'm going to say urlencoded, and I'm going to use extended as true, and then I'm also going to specify bodyParser.json. So basically this is going to say that I can use objects when I'm taking in data and passing out data from my API, and I can be able to encode them as JSON even though I'm sending in these objects. So it's just a little bit of a helpful configuration there. Now, I'm also going to use that path now. So what I wanna be able to do within my application, now, I'm not necessarily gonna do it in this particular course. But if I said before, if you wanted to use or get access to images, if you wanted to get access to custom CSS files or other static files, you need to be able to specify and tell Express where those things live. So the way that we do that is, we're gonna say express.static, and then you can tell it where these things live. So this is where we going to use the Path library, and this simply is going to allow us to join together different pieces of a path, and it will create those paths for us. So we don't have to worry about that I put the correct slashes in there, are they in the right places, are they URL escaped, and things like that. So I don't have to worry about that too much. So what I can do now is I can say I can join __dirname, which is gonna be the current directory, and I can also specify where those things are gonna live, so I can specify a folder name. I think pretty traditionally you will see things like public, you will see your static files in that public directory. So now you could create a public folder, and you could put static files and their images, CSS, other JavaScript, or whatever, and you would get access to them in your Express application, which is pretty nice. And then, the last thing that we're gonna do here is we're simply going to say, once we start up our application I want to listen, so I'm gonna say app.listen(). I need to specify a port, which is gonna be port 3000 defined by our constant up here, and then after that you can kind of create a little callback function that's gonna execute once, that is actually done. So typically what I like to do is just create a console log line right here that says that we're up and running. So I can say something like Starting Server on port, and then we'll just go ahead and put in here that we are running on port. But in order to do this, I need to use the little backticks to be able to do that sort of concatenation like that. So there we go, so now we've created this basic server-side application using Express, and this is what that really entails. And that's really all you have to do to get something up and running. Now, obviously we're going to augment this a lot as we continue to build out our application, but this should be just enough. So now the next thing that we wanna be able to do is we wanna be able to get our application up and running. But I'm gonna show you in the next lesson that based on the way things are currently configured, we might want to augment the way that we're gonna get our application up and running. So in the next lesson I'm gonna show you how we're gonna start our application, and how we can configure it to watch for changes not only in Angular but also in Express so that things are updated and re-run every time we make changes automatically.