FREELessons: 10Length: 59 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Creating a Simple Web Server

So far we have been writing all of our Falcor sample code locally in a static web page. That's nice for learning, but it's not how applications work in the real world. In the real world, the browser is making JavaScript calls back to the server to retrieve information and display it to the user. In this lesson, we'll create a very basic web application using Node and Express to exchange data.

2.6 Creating a Simple Web Server

All right, so to this point we have really been just kind of playing around with some of the basic Falcor functionality, including this model concept. But what I'd like to do is to do a basic example here of what it looks like to actually retrieve data from the server. Because in the real world that's really what we're gonna be doing. We'll be serving up some basic markup and some JavaScript to the client and then via JavaScript, we're actually gonna be issuing the GET and PUT and POST requests to the server. And dealing with the model there, as opposed to locally hard-coded right here on the server. So how are we gonna do that? Well, let's start to mimic what that's gonna look like using Node and Express. Now, if you've never used Node or Express, it's not really a big deal. I'm gonna take you through a quick crash course on how to set that up. But you can definitely get much more information, much more in-depth information, if you head over to Tuts+ and take a look at any other Node and Express courses and tutorials. So what we want to do now is, the first thing is we want to head over to our terminal and we want to do an npm init. And this is basically going to set up a very basic NodeJS server for us. And I'm just going to hit Enter through all of the options here cuz I'm gonna use all the defaults. And you really don't need to know too much about them, other than what it's gonna do is it's going to create a package.json file, which we'll take a look at in a minute, so that's fine. Now what we wanna do is we wanna bring in some dependencies into our application that's going to allow it to run very similarly to how we were doing our samples in the last couple of lessons. So I wanna do a couple of npm installs and I wanna bring in Express, and that's gonna be our web framework that we're going to use within Node so that we can serve up requests and handle requests from the client. So we have Express in there, we also need to bring in Falcor, so we're gonna say, npm install falcor, I'm gonna save that. So we're gonna bring that one in, cuz we're obviously gonna need to be able to handle the Falcor functionality, as well as the Falcor models that we're gonna push off to the server. And then finally, what we wanna bring in, is we wanna bring in some middleware that's gonna be able to tie together the requests coming in from the outside world to something going on with our model within our server. Because there could be a lot of functionality that we're gonna need to be able to translate back and forth. And it's a lot of work to be able to do that manually and hard code that kind of stuff. So we're gonna bring in some middleware for Falcor and Express called, surprisingly enough, falcor-express. So we wanna bring that in as well, so we're gonna download and install that. And once we have installed those dependencies, we can now head back over to our text editor here. And you're gonna see under my apps-server folder, I now have a node_modules folder, which is gonna contain all of our dependencies and other node modules that we're gonna need to make this application run. Including Express and Falcor and stuff like that, so that's going to be good. And then we also have this package.json file. And this package.json file basically just provides some structure and configuration to our application. You really don't need to understand all of it but the important parts here are going to be obviously the name and the version. And then we're gonna have this main piece here which is gonna say that our main file that's gonna drive our application is index.js. And that doesn't exist yet, we're gonna have to create that in just a few moments. And then we also have these dependencies listed down here. So these are the dependencies that we're gonna be using within our application, namely express- falcor and falcor-express. So we have those things set up and that's great. So let's go ahead and create this index.json file so we can actually get started. So we're gonna create a new file in our apps server directory, and we're going to call this index.js. Now within here, we're going to need to actually bring all of these dependencies into our application to be able to start up our web server. So let's begin by requiring Express, so we're gonna require express, and then we are going to need Falcor. So we're gonna say var falcor is gonna be equal to require!'falcor'. And then we're gonna need falcor express, so we're gonna say falcorExpress is gonna be equal to require('falcor-express'), just like that. So it's fairly simple stuff, and now that we have all of these references and they're all required into our JavaScript file, we now want to be able to actually start up an app server. So the way that we're gonna do that is we're gonna say var app is gonna be equal to a new instance of express. That's going to give us access to this and then, ultimately what we're gonna simply do is say app.listen. And this is going to have our application listen on a specific port. In this case we're gonna say 9090, but you could put in any sort of port that you would like on here and that would work fine as well. Now one other thing that we're gonna need to do, since this is gonna be a very simple application, we need to be able to tell Express that we want to be able to serve up static files from our web server. So basically what I want to do is I want to take it one of these examples, say index3, and I want to be able to run this from the server. But this actual index file is a static file because it resides on the file system. So I want to tell Express that I want you to be able to access that. And the way that we do that is we say app.use and we want to say express.static. And we want to provide access to all the static files in the current directory, so that's basically the simplest way that we can do that. So now, if I were to issue a get request to my web server on port 9090, since that's what we're gonna be listening on. I want it to serve up an index.html file because that's that default html file that's gonna be served from the server if you issue a get request to the root, and that's exactly what we're going to do. So let's go ahead and save that, I don't need this index file yet but I am going to need an index file in here. So I'm going to create a new index.html and all I'm gonna do is put in some boilerplate in here within the body, I'll create an h1. And I'm just gonna put in here Hello Falcor, like that, so let's go ahead and save that. So now I have this basic index html file in the root of my application, as you can see right here. And then in index.js, I'm going to start up my app server. And I'm going to say I want Express to allow access to the static files, namely, once again, index.html in the local directory. And then we're gonna listen on port 9090. So once all of that is saved, I can head back over to my terminal and I'm simply going to run node index.js, and I'm gonna hit Enter. And if I don't get any errors here or problems, that seems, at least for now, that everything is running as we would want it. Now we can head back over to our browser, and I'm simply gonna navigate to localhost9090. And as you can see here, I'm serving up that index.html file that I just put together, cuz we can see this h1 text here, Hello Falcor. So that's gonna be the foundational aspects of our web server. And now, we're going to push some of our Falcor functionality off of our hard-coded html file and push it off to the server.

Back to the top