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.2 Creating an Index Page

In this lesson we're going to create a basic index page for our application. However, before we actually start writing some HTML let's install a CSS library. For this project, we're going to use the skeleton CSS framework. It's a very, very minimal but responsive framework that is pretty simple to use. If you remember from the application demo lesson, it gives our application a very simple, very clean interface. Very, very easy to use. So we can get this by doing bower install skeleton. And the way I have Bower setup it will install into a public/lib directory, which is great. And now that we have our public directory, we can actually create our own custom CSS file, because we will need to do a bit of custom CSS. So I'm just going to touch a file, then we're gonna call it public/style.css, and that is gonna be our own CSS file. Now our index page is not going to be a static index.html file that we serve from within the public directory. It's actually going to be a template that will be compiled on the backend using Express and EJS. However, for now I'm just going to create it as a index.html file within the public directory. And this way we'll be able to check it out and see how it works, and then we'll be able to go ahead and move it to our views directory. So let's go ahead and create that file. And now, from within our editor, I can go ahead and open our index.html file. Now we're going to keep this very simple. I'll start with a simple doc type. I'll also create our basic HTML head, title and body tags. And now, let's some stylesheets. So, we'll have a link that will be rel='stylesheet'. Of course, and we'll have an href of /lib/skeleton/css/ and we'll start with normalize.css. And then let me duplicate this, and the next one will be lib/skeleton/css/skeleton.css. And I'll duplicate this one more time, and we're gonna take out all of that, and we're just gonna have style.css, and of course that will be our own file. Excellent, now apart from this, the only other thing we need is a script tag at the bottom. And this script tag is going to have a source of main.js, and this is our entire index.html page. So, we'll pull in our skeleton library and then our own CSS, and then also we're gonna include /main.js. And this, of course, will be our compiled JavaScript file. And so, once we load that file, our web application will load into the body here. Now, to see this in action with our gulp file from the previous lesson, we should create a little JavaScript file that we can compile. So, this means that we'll have to create the source directory. So, I can do that from right within my editor. I'll say, make source directory. And now let me create a new file which will be src/main.js. And so from within here we'll just do something very simple to show that we have Browserify working. We could say var events = require('events'). So we can actually require a native node module. And you'll see the browser file will actually give us access to that. And so then we can do console.log(events) and after that I'll just console.log(hello world). And actually, let me do the hello world above that one. Excellent, so now that we have our main.js file, notice that this main.js file is in the source directory, it's not in the public directory. So our index.html file here is gonna look in the public directory for main.js, but it's not going to find it just yet. So what we have to do is come back to the terminal here, and we have to run gul. And gulp will, of course, run Browserify by default, as you can see. And now if we look inside our public directory, you can see that there is this main.js file. In fact, if we come back to our editor and open up the main.js file, you can see that we've got a ton of stuff going on in here. You can see right here we have module.exports EventEmitter, and so this whole chunk at the top here is actually our event module, which Browserify is pulling in from node for us. And then right at the bottom here, you can see right here we have our main.js file. You can see we're requiring events, and here we're console.log-ing those two different things, and if you go a little bit further you can actually see this is our source map. Anyway, you can see we have this main.js file now. So we should be able to open up index.html. Now to see this in action in a browser, we actually do need to start a server because our link tags and our script tag have relative URLs, which means we need a server running. So I'm gonna cd into the public directory, and I have a simple Python server installed. If you have a Mac, or probably Linux too, or really any installation of Python on Windows, it would probably have this as well. You can do Python-m and it'll say simple HTTP server. And that will go ahead and start up a server on port 8000. And if we come here to local port host 8000, you can see that this is working just fine. If you pop open the console down here, you can see we have hello world, and our EventEmitter() function being logged to the console. Even better, if you look over at the right hand side here, you can see, although the filename is not correct, and I suspect that's because the file is the same as the one we sent to the browser, you can see that we have the right line number. So, we have line three and four here. And if I click this, you can actually see our source maps are working. So, you can see this file here is the main.js file that we are using in our source directory. So this shows us that everything we need for our application to work on the front end is correctly installed. And now we're ready to start doing some server side set up. So that's where we'll start in the next lesson.

Back to the top