2.1 Organizing Your Code

Before we actually begin writing any code, let's talk a little bit about the file structure that we're going to use in our application. Now as we've seen in the default meteor application that we got when we created this project. Meteor just gave us three files one html file, one JavaScript file and one css file. However we're not restricted to using just this structure. In fact meteor allows us to do pretty much whatever we want within the confines of just a few rules. So before we begin writing any code, let's go over those rules really quickly. First of all, any files in the root Directory of our project. The three files that we've been given by default, will be loaded on both the client and the server. Now of course the HTML and the CSS aren't really useful on the server, so just kind of ignore those and you can think about the JavaScript and how it is loaded on both the client and the server. Now a lot of JavaScript that you can write within Meteor will be used on both the client and the server. But there is going to be some stuff that will be specific to the client or specific to the server. And of course, a good example of this is some of our database manipulation code. In the previous lesson, we removed the insecure package from our project so that we can no longer modify the database from the client. We can only do that from the server, so trying to run database manipulation code in the client would fail. So we probably want to make sure it's only run on the server, how can we do that? Well, there are a couple of ways to distinguish where we want our code to be ran. The first thing we can do is create some directories. So if I make a directory here called client, anything that I put within that client folder will only be loaded on the client. We're actually going to put most of our HTML and CSS in here, just for the sake of organization. Any the job script of course in this folder will also only be run on the client. Now will make another directory here called server. And anything that goes in that file will only be run on the server. Now there may be some stuff that you don't really want to run anywhere but that you want to be served as static assets, stuff like images. Well for that we could make a public directory. Now in our case we don't actually have any of these assets. So we're not going to make a public directory. If there's anything that you don't really want to be loaded but you need to be a accessible from the server. You can put this in a private directory. This would be useful if you had any kind of data source. For example, maybe if you have a CSV. file or a JSON file, or some file that you need to be able to access and read and write to from the server, but you didn't want to be loaded in any way on the client. These type of files can go in a private directory. There's one more directory that will not be loaded when our application is running, and that is the tests directory, and of course if you have any tests for any of the code that you're writing in your application, you can put that in the tests directory. And also for backwards compatibility with Node, Meteor does not load anything that's in a node_modules directory as well. But for the most part, since we're using Meteor packages, we won't actually need to worry about that either. Now, apart from where our code is loaded, the other thing we want to worry about is when the code is loaded. That is in what order does Metor load our files. It's actually a pretty simple order. First of all any h.t.m.l files are loaded first. That's because we're going to have templates in our h.t.m.l file. And before we can add helpers and events to those templates, we need a template to work with. So of course the templates will be loaded first in the HTML files. Next any Java script files that are within a folder named lib will be loaded first. Of course these are libraries and presumably other codes will need them. Now we will need a lib folder that will be loaded on both the client and the server. So I will make a lib directory. Of course we could have a lib directory within the client folder and within the server folder as well. Now in that case, on the client, client slash lib is loaded before the general lib and on the server, server slash lib is loaded before the general lib the rest of the files are loaded according to their directory structure. Shallowest files are loaded before files in deeper directories, and of course they are also loaded alphabetically. So a.js will be loaded before b.js. The last rule is that anything that begins with the name main is loaded last. So you'll want to kick off your application in main.js, and so those are the rules for where your code will be loaded and when. Now currently we have these three chess files that were created for us by default, we're not gonna need those. So I'm gonna go ahead and remove those and now let's create our very first template. Let me make the directory client/templates, and this is just gonna be a folder that will collect some of our extra templates. The first one is going to be our index.html page. So let's open client/templates and I'll create an index.html page and the name of this file isn't actually that important. What is important is that in here we have our head. Now if you need anything in the head of your application, you don't actually have to have HTML tags around it, or actually build out a typical HTML structure. Meteor will just find this head and tag, and plug it into the right place. Also of course, we don't have to worry about connecting JavaScript or CSS files here. All of that is taken care of for us by Meteor. So in here i'm just going to put the title, which will be chess. That's really all we need for our head. Now if we had anything that we wanted to put in the body, we could do that here as well like this. However, we're going to worry about rendering everything in our body through our rotor. Which we're going to talk about in the next lesson. So we don't actually need a body tag. Metor of course will create one for our HTML page, because we don't give it anything to work with, and will be replacing the content in there with our router. All right so that's really all we're going to do for this lesson in the next lesson we're going to start looking at that router.