Join Alex Banks for an in-depth discussion in this video Building the Node.js server app, part of Building a Polling App with Socket IO and React.js.
- We're going to break ground on this app by constructing a web server that serves static files. To help us do this, we will use the Express framework. So, let's take a look at our initial files. I am inside of the very first start folder of the first lesson and you'll notice that, in there, we have a public folder that has an index.html and a style.css. So, we need to build a web server to serve these files and we're going to use Express to do that. Let's go over to our terminal and from our terminal, we need to install a couple things. The first thing I need to install is Express and I can use the node package manager to install express with this command, npm install express.
And that will install the express framework. We're also going to be using bootstrap for this app. So, bootstrap is going to help us with some of the responsive design, as well as some of the button stylings. So, we're going to install that as well, nmp install bootstrap. Great! And now that we have both of those things, if I go back over to Sublime, what you'll notice is, there's a node_modules folder. So, inside of this node_modules folder, we now have our dependencies, bootstrap and express. So, we just installed those. Now, we need to build our server file. So, I'm going to come to the root here, which is our start folder.
Right-click over that and I'm going to select New File. Once I've created this file, I'm going to immediately save it. So, I'm going to go to File, Save As, and we will save this file as app-server.js. Great! So, this is going to be our server side file that we will run using node. This is where we're actually going to code our Express server. So, I'm going to start off by including Express, by requiring it, and I have now loaded that express framework into the express variable. I'm going to use that to create an instance of an express app.
So, just invoking that express variable that I created will create a new instance of an express app that I can use. So, on the express app instance, we need to tell it to serve files from our public directory. So, we're going to accomplish this by using a piece of middle ware. app.use is the function that we'll use to wire up our middle ware and the middle ware that we want to use is express.static. The express.static function is going to set us up so that we can serve files from any static folder that we choose.
All we need to do is send express the path to that static folder. So, I'm going to serve files from the public folder. Great! So, that should serve everything from our public folder. But, I also need this server to serve our bootstrap files. Now, if I drill down into this node_modules folder and then drill down into bootstrap, what you'll notice is, there's a dist folder. And under the dist folder, this is where the css that we want to serve, as well as the fonts, are located. If I expand this css folder, there's the bootstrap min css that I want to serve from this web server.
So, I'm going to add another piece of middle ware, another static file folder and this time, what I'm going to go ahead and do is add the link to node_modules/bootstrap/dist because that's where we want to serve the files from. Great, so we should be serving those files from the dist folder under bootstrap. So now, I need to tell my app which port it should run on and I can do an app.listen and this function, I can send a port number, and this will tell my app to start listening for requests on port 3000.
Now, the last touch, which is nice, is to let our users know that there's a server running here. We can do this with a console.log and I will just send them the message that a Polling server is running at localhost:3000. Great, so now I can save this file and we will go back over to the terminal to run it and we can run our server file simply by typing node app-server.js. So, that should run our server file and when we do that, we see this nice little message here that says the polling server is running at http://localhost:3000.
So, let's check to see if it's running. I can actually go open a browser window and then, type in localhost:3000 and there, we see our file running. We should also be serving our css style, so if I do /style.css, there, yeah, we see our css file. The only issue is, that doesn't look like our css file is affecting this html page and that's because we haven't added the links to the style sheet to our html yet. So, let's go ahead and do that next. I'm going to go back into Sublime and there's our app server.
What I'm going to do is find that index file. It's under the public folder, index html, there it is. So now, as I look at this file, there's obviously no links to the css here. We want to add them, so I'm going to come in here at line four, right at the end. Place my cursor there, hit return, and create a new line on line five. Sublime is going to let me type the word link and then, pressing the tab button, it will automatically fill out that link tag for me, mis-assuming that I want a link to a style sheet, which I do, and I'm going to link to style.css. So, that brings in our original style sheet.
Right below this on line six, I'm going to add another link and this link, we're going to serve the bootstrap style sheet. So, remember, we're serving all of the files that are located in the dist folder and under that, we have a css folder and under that, we have bootstrap.min.css. So, I need to serve the bootstrap file by referencing that css folder first and then, bootstrap.min.css. There we go. So, we have both of these style sheets included in our index html. What we don't have are any bootstrap classes affecting anything in here.
So, I'm going to add a div that uses a bootstrap class to affect this live polling heading that we have here. So, I'm going to come right down here to line eight and hit Enter. So, just below the body on line nine, I'm going to add a div and I will give it a class of container and the container class is a bootstrap class. What it does is, anything that we wrap inside of the container class, will automatically be handled so that it looks nicely in all screen sizes. So, I'm going to go ahead and take this heading one here on line 11 and I am going to place this heading one in between our div and /div here on line 10, there we go, great.
So now, I've added the css style sheets and I've added a bootstrap class to a div in the html page, so we should see bootstrap taking effect. If I go back over to the browser at this point and hit refresh, great, you'll notice that the font has changed signaling that we've loaded our css styles and also, that Live Polling jumped over. That's that bootstrap container working. So, as I change the width of my window here, you'll notice that that container class is automatically handling the positioning of that Live Polling for me. So, we've done it! We've created a server that serves static files and it's also serving the bootstrap file and we've included both the style sheet and the bootstrap in this document.
So, we are ready to roll with the rest of our application.
- Setting up the environment
- Connecting sockets
- Handling disconnects
- Setting up the React.js router
- Passing state to child components as properties
- Joining the presentation
- Starting and running the presentation
- Asking and answering questions
- Graphing results
- Upgrading to ES6