Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:17Length:2.7 hours
Webappangular
  • Overview
  • Transcript

1.3 Starting the Server

We're ready to start writing some code for our contacts application, and we're going to start with something pretty simple, our server. So I'm going to open up vim with the server.js file. Now I said our server will be simple. We're going to build on this as time goes on throughout your project, but our initial version here is gonna be pretty simple. We'll start by starting a variable called express, and we will require the Express library that we downloaded in the previous screencast. Then we will go ahead and create an app object, which we we will get by running that express function. And this app object here is our express application. So now, let's do app and I'll say .use. And we'll start with express.static and we will statically serve the public directory. So this is the very first thing we wanna do. This is a piece of Express middleware. In fact, it's the only piece of middleware that comes built in with Express version 4, and this allows us to statically serve all of the files inside public. So this will be very important for our front-end web application because pretty much everything is going to be a front-end resource. And it's all gonna go inside that public directory. Next, we wanna have a get route here, and we will just get any unmatched route, and this will take a function that has a request and response object. And in response to all of the requests that are not caught up until this point, we will do a response dot sendFile, and we will send the public/main.html file. Now you might say, well, why aren't you calling that public/index.html file? And the reason I'm not doing that is because if we call it index/html file, when someone gets the root directory of our project, that will be interpreted as getting the index.html file, and it's just going to be served statically up here. But sometimes the home route is not going to want the index.html file. It's gonna need to redirect, for example, to our login page. And so we're going to eventually have some middleware going between this initial use statement here and our ending get statement here. And so, to avoid any unexpected behavior, we're going to call that main.html. So then underneath this, we have to go ahead and start our application up by listening, and we will listen on port 3000. Believe it or not, that is the whole web server that we need for now. That's all we need to do to start with anyway. So now let's go ahead and open up our public/main.html. For starters, I'm just going to paste in a very, very simple template here. We have our DOCTYPE at the top. There are html tags which surrounds our head and body tags. So let's see, what do we start with in here? Well, let's give our head a title that we'll just call Contacts. We also want to add a base element. Now, if you're not familiar with the base element, we add the base element with an href attribute of root. Angular is gonna use this base element. This reference that we have here tells it basically what path to use when it gets any of our front-end resources. So when it goes to get one of our front-end views, for example, it's going to use this as the root which it starts with. So if our view is views/list.html, for example, it will do /views/html, and that first slash comes from the base tag there. This is very important. Do not leave it out. Otherwise things won't work and it will be confusing why they don't work. The next thing we want to do is in the body, let's make a div with a class of container. And if you're familiar with Twitter Bootstrap, you know that this is a Bootstrap class. Inside this, we'll have another div with a class of page-header, and in here we can have an h1 that will just say Contacts. At this point, let's just go ahead and start up our server and make sure this is working. And if we come back to the terminal here, I'm gonna use an MPM package called nodemon. What this does, basically, is if you just run node server.js, that will work just fine. However, if we make any changes to the server code while this is running, then those changes will not be reflected in a web application because the server's already running. However, if you use the nodemon package and run nodemon server.js, then anytime you change the server, nodemon will restart the server. Now, nodemon doesn't come by default. You'll have to do npm install -g nodemon. The -g flag is to install it globally, which makes it a command you can use on the command line. So, nodemon server.js. That will go ahead and start up the server. Now if we come back to the browser and go to localhost, you can see we have the message no method sendFile. Okay, let's come back to server.js here. This f in sendfile here should not be capitalized, so I'll change that to a lowercase. And now there we go, Contacts. Now, one more thing before we wrap this up. Let's include the Bootstrap JavaScript init in CSS here so that we can benefit from adding these classes. And you could use the default style sheet that comes with Twitter Bootstrap. However, I like to switch it up a bit and head over to Bootswatch, which is a bunch of free themes which replace the default Bootstrap CSS file to give us a different theme. Now you can see there's a bunch of different options here, and in this screencast, we are going to use Flatly. So go ahead and click on Flatly right over here. And then where it says Download here, bootstrap.min.css. And now I'm gonna ahead and hit Cmd+S and in Contacts > Public and I will put it in our source directory bootstrap.min.css. So now if we come back here in our head here, let's do a link to a rel, which is a stylesheet. And we will have href to src/bootstrap.min.css. I believe is what that was called. And if we come back to the browser here and refresh it, you can see that Contacts is now styled nicely, and we have some margin going on here from the upper corner so we know that our CSS is being loaded just fine. Now while we're here, we may as well load the JavaScript because eventually we are going to need some JavaScript because of some of the Bootstrap components that we're gonna use. >> So we will do script with a source of lib. Remember /bootstrap/, and I happen to know that the path is dist for distribution, /bootstrap.min.js. And if you've used the Bootstrap JavaScript before, you know that this means we need to include jQuery before Bootstrap. So I'm going to replace this, and we're gonna change bootstrap here to jquery. And in both cases here the path is pretty much the same. It just says jquery. So lib/jquery/distribution/ jquery.min.js. And right now, we don't have any way of seeing if that is actually working. Well, if I refresh this and if I open the JavaScript console here, you can see we had a syntax error, unexpected token less than sign, which means Bootstrap here is not being loaded by the static public directory. It's getting the page HTML. The reason for this is oh, inside the distribution folder, there's a /js folder because you can also get the CSS, right? So we need distribution /js/bootstrap.min.js. All right, so now if I refresh the page, you can see we have no errors down here in our console, which means that both of our JavaScript files are loading up just fine. So there you have our first bit of code, the server for our web application.

Back to the top