2.2 Set Up a Router

All right, it's time to start writing code for our application. And in this lesson we're going to begin with the router. Now the router will allow us to move from page to page throughout our application, and of course it will change the URL accordingly. Now meteor does not come with a router, however there are several great router packages. Now a lot of meteor applications and a lot of meteor tutorials use the iron router package. And that's a great package and it can really do everything you need. But since there are so many tutorials using that one, I figure why don't we use a smaller package that's a little bit more streamlined. So in this project we're going to use the flow router. So let's begin by adding the package to our application. We'll say meteor add and the name space here is kadira and we have :flow-router. All right so we'll let that install. And what we're going to do with this router is create a layout. We can create a layout which will kind of be like our master template. And then we'll be able to insert other templates inside that layout, depending on the page that the user is viewing. All right so now that we have our router installed, let's go ahead and create our layout. And we'll create a first template to insert in that layout and then we'll get to writing the actual java script that uses the router. So let's open a new file, we’ll say client/templates, and this is going to be a layout.html. Now once again, the file name is not important here, but that's what we're gonna call it. What is kind of important is that we create a template in here, so we'll use the template tags. And we will give this template a name of layout. All right, now since we're going to be using Twitter Bootstrap, we'll start with a class of container, and then in here let's create a nav element. And this is going to be the navigation bar at the top of our application, let's give it a couple of class names. We'll give it a class of navbar and navbar-default. Then, inside our navigation element here let's create an unordered list and this will have the class of nav and navbar, using the typically wordy bootstrap classes. And for now in here let's create a single list item. And inside this list item we will put an anchor element, let's have a link back to our home page, and we'll just include the word Chess in here. And let's actually add a class to this anchor element, we're going to say navbar-brand. Okay, so now outside of our nav element here, let's create a div, and we'll just give it an ID of main. And this is of course where the primary content of each page is going to go. Now in here, we want to render another template, so let's use the insert template syntax, that's double curly braces and then a greater than sign at the beginning. And we want to use template.dynamic, and this of course will let our router know that we want to render another template inside of here. However, what template do we want to render? Well, we need to set that, so will set the template to render equal to the value child. And in our router code, we're going to set the value of child and so, whatever we set to the value of child will then be set here to the value of template, and of course, that template will then be rendered for us. All right so this is our layout template. Let's go ahead and create a first child template so that we'll be able to see this in action. I'm gonna create a new file client/templates/main.html and this is just gonna be the home page that will appear when they first come to the website. Now of course we'll start with our template tags, we'll say template name is main. Once again it's not important that this has the same name as our file, this is just the name we'll refer to this template by. In here will have an h1 and we can just say Welcome! And underneath this will have a couple of h2's, and these will have some links inside them. The first one will go to the games page, and we'll just have a link here that says Play some chess! I'm just going to duplicate this, and we'll change the URL to users and we'll change these words to Find some friends! So that is all we need to get started, we have two templates, now let's go ahead and write our actual router. Now the router is something we'll need both on the server and the client. So I'm going to create a router.js file in the root of our application. It's pretty simple to create a route, we can say flowrouter.route. And the first parameter that we have here is the route string. So that's just going to be a forward slash. And then we will set this up in an object of options. First, let's just give it the name which is going to be main, and then we can go ahead and create an action function. And one of the things I haven't mentioned yet is that media allows us to use the new script standards. And so I can actually write a method like this, no need for a colon, no need for the function keyword. And so we're gonna be doing some of that throughout this course because meteor will automatically compile it for us. So in here we're going to use some native meteor functions, we can say Blaze.renderWithData. And this is going to allow us to choose a template to render and render it with some specific data. The template that we're going to render is template.layout. Remember we created this template named layout, and this is where we actually get that. So the template object will have all of our templates on it .layout is the one we named. What data do we want to render it with? Well, we want to render it with the child of a main. And where do we want to render it? We want to render it in document.body. So this is just going to render the layout template using this object of data that we pass it and it's going to append it to this element right here. Now our Meteor server here has been recompiling our code and so when we head over to the browser you can see that our application is already starting to take shape. However we do have a little bit of a problem, right now if I try to navigate to one of these routes, noticed that the URL of course changes in the address bar and we do get an error there is no route for that path, but the problem occurs when we try to move back to the home page. So if I click Chess up here in the corner we navigate back to the homepage and you can see that our action function for this route has been run, again. And exactly what we asked it to do is done, it re-renders that template and appends it to the body. Which means that we are doubling up on the content in here, which is not what we want. So we need to do something a little bit different here. And what we're going to use here is another meteor package made by the same folks that make the flow layout. So I'm gonna go ahead and do meteor add, and we're gonna kadira and this is going to be blaze-layout. And this is going to allow us to use our layout in nested view pattern right with the flow router without having to worry about templates within templates. So this gives us the BlazeLayout object and we can say BlazeLayout.render and we're gonna render the layout template, and we'll give it our data object which is child is main, and that's all we need to do. So I'll get rid of our first attempt and instead, we'll just use the BlazeLayout package. Now if we come back to our application, I'll navigate to one of our nonexistent routes, we get the same treatment. Now if I go back to the main route, you can see that we don't have extra parts being rendered. So that is our router. Now that we have a router in place we're ready to start building some of the other facets of our application.