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.3 Starting the Server

Now that we have a super basic front end set up for our application, the next step is to create the back end. And so the next couple of lessons will involve setting up the server for our application. Now we're going to be using the express library, and so we can start by doing npm install express. And I want to use version four so I will say at four, and this time we are just going to do save and not save dev because express is not a development dependency, meaning it's not something we need if we are trying to develop this project. It's a dependency, meaning it's something we need if we want to run this project. So I'll go ahead and install express. Now we also want to install EJS, which is an embedded JavaScript templating system. So I'm going to clear this, and we'll do npm install ejs. And we want to install ejs version two. Now that we have those two libraries installed, we're ready to create our server.js file. So we'll open up the server.js file, and we'll start by getting the express library, which we do just by requiring that module, and now we can create a new express application simply by running the express function. Often you'll see people assign this to a variable such as app, like this. However, I'm not gonna do that in this case, mainly because I don't need that variable. I'm just going to chain all of my function calls onto this initial call to express. So the first thing I want to do is to set the view engine and this will let express know to use the EJS templating system that we just installed. Notice we never actually have to require this package. Express will do that behind the scenes for us we just have to set the view engine equal to ejs. Next we want to call expresses use function, which allows us to give express a piece of middleware that will be run for every request. And we're going to use the express.static middleware, which will allow us to serve a directory statically. So that if any requests come for any resources within that directory, they will be automatically sent back to the browser. This will of course be for images, CSS files, JavaScript files. However to do this, we can say that we want to use express.static. And we'll pass the static method the string ./public which will tell express to serve our public directory statically. Next we're going to use the get method and we'll just get star. And so what this will mean is that any request that is not captured by our express.static middleware, or basically anything that is not a file we're serving, we want to run this function right here. Of course in express we take the request and response as two parameters, and all we want to do in this case is do response.render, and we want to render our index template. Now later on we will pass some values to this index template, and actually in the next few lessons we're going to set up a few other rotes that we expect express to use, for example our API rotes and our log in rotes. However, for now this is all we need to do. So basically at this point what our server here says is anything that is a static file that is in the public directory, go ahead and serve that. Any request that is for anything else we're going to send our index template. And this will make it very easy to do routing on the front end. Now, once we have our server set up like this, we need to actually get it started, so we'll say .listen, and we'll just listen on port 3000. And there we have our basic express server setup. Now we could go ahead and run this, however right now we don't actually have an index template. What we do have is in our public directory, an index.html file. So I'm going to come back to our terminal here and first I'm going to make a directory called views, because that is the default name of the views directory, that's what Express expects so we'll create that folder. And then I want to move the file public/index.html, and I wanna move it to views and I wanna call it index.ejs. And since we're using the ejs templating system, Express expects our template files to have that extension. So now that we've moved that, you can actually see that if you do ls views, you can see that we have our index.ejs files here. Now, I could run node server and it would got ahead and start up our server on local host port 3,000. So now, if we come to a browser and go to a local host port 3,000, we should see the same thing that we saw in our previous lesson when we started the Python server. Except in this case we're at Port 3000. But you can see that we're still rendering our index.html file, even though we don't actually have a file called index.html. Express is successfully rendering this as a template. Now the reason this is going to be a template, is because later on we're actually going to interpolate some values into the template, and so having it set up as a template will make it easier later on. But as you can see, we have our two lines being logged to the console just as we would expect. So this means we have the most basic server possible set up which means we can now start thinking about some of the other responsibilities of the servers, such as creating and managing user accounts and also managing the API. We'll start to look at these things in the next couple of lessons.

Back to the top