Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:19Length:2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Restructuring Files

In this lesson, we are going to pull most of our content out of the main.html file and create new HTML and JavaScript files for each of our templates, including our body template.

3.5 Restructuring Files

Hello and welcome back. In this lesson I wanna take some of what we've created so far and I wanna pull it out of the main.html and main.js files. And I want to put it in a separate folder called Imports. Now, the Imports folder is very important to Meteor. It's commonly used to create HTML and JavaScript files that will be imported as they're called, instead of just importing everything all at once. A Meteor does not automatically import the items that are in the Imports folder. That way, it only uses the resources it needs to use and it doesn't reserve room for all of this items that we may or may not be using at a certain point in time. So, we're gonna create a new folder called imports and we're gonna take a lot of this content and pull it out into that folder. So the changes we made in the last lesson are now saved in the site 004 folder, and all the changes we make in this lesson will be saved in the site 005 folder and you will see a new folder in that folder called imports. So let's go ahead and create this folder In the social lite directory, I'm going to right click in this empty area down here and create a new folder called imports. I'm gonna create a couple folders inside this folder and all the folders I'm creating here are recommended folders in the meteor documentation. So if you go into meteor and look at how they suggest you structure your files and folders, you'll definitely see this pattern over and over again. So in our imports folder we're gonna create a new folder called ui. And this folder will store, just as it says, a lot of our user interface objects. It will contain the HTML and JavaScript files that control things in the front end. Then we'll have another folder here called api, which will control things on the back end. This will control some of our interfacing with our database and things like that. But for now, we're gonna be focusing on this ui folder. So what we're gonna do in this course is, with each template that we create, we're gonna create a separate HTML and JavaScript file for that template. So, in our ui folder, I'm gonna right click, and I'm gonna create a new file, and I'm gonna call this body .html, remember, the body is a template in Meteor. And so we're gonna store all of our markup and all of our JavaScript for our body template in this imports UI folder. And I want you to get used to this type of workflow where you'll create the html file for a template and then immediately create another file with the same name except it's gonna have a .js extension, and this will be your JavaScript file for that body template. Now we've also got a user post template that we want to pull out of our main.html file. So, again, in our ui folder, I'm gonna create a new file. I'm gonna call this one userpost. You'll notice I'm giving these files the same name as the template itself, so userpost.html. And then I'll immediately also create a new JavaScript file called userpost.js. Notice these are userpost singular. Each one of these is gonna represent one user post. So now let's go to our main .html file and I'm gonna grab the entire body of our document here and cut it, and we're gonna paste that body in the body.html file. Just gonna fix some of that indentation there, and then we'll save that. And then we're gonna take this template for our userpost, and we're gonna cut that. And I didn't mean to close that. And we're gonna cut that, so that all that's left in our main.html file is our head section, and then in our userpost.html file, we're gonna paste that userpost template. And then once again we'll go in and fix some of the indentation there And there we go. So we've got our userpost.html. In order to get all of this to work, just because we've moved everything into these files, doesn't mean it's gonna work. In fact, if we go to our browser right now, all we see is this red background. And that's obviously not what we want. If we go to F12 to open up our console, we can see we're missing some things. We do have an error here. So let's jump back into our code editor and let's talk about some things. So let's jump into our main.js file, this is the first thing we're gonna look at. And here we have this helpers object for our body. And I'm gonna take that helpers object, this entire object here, and I'm gonna cut it. And we're gonna paste it into our body.js file. Now, that's not gonna work yet because we haven't imported the proper statements yet. We don't have access to this template with a capital T until we import it. So let's make that happen. Let's move this down a couple of lines, and let's create our import statement. So we're gonna do an import, and then inside curly brackets we're gonna import template with a capital T there. And we're gonna import that from meteor/templating. Now remember this is not a folder structure here, you're not gonna find a folder called meteor and then inside that a folder called templating, this is not a folder structure, this is a namespace which is basically a way of organizing your code. But that's how you're going to import this template class. Also in the JavaScript file for whatever template your editing, you need to make sure you include or import the HTML file for that same template. So we're gonna skip a couple of lines, and we're going to import. And the body.html file is in the same directory as the body.js file. So we type a single dot there and then a forward slash and then body.html. Now since our body is also making use of the user post template, we need to make sure we include the user post JavaScript as well. Now, in this case we're not including the html for userpost, we're just including the JavaScript. That way we'll have access to the template right here in our body.html file. So let's go back to body.js and just before body.html, we're going to import ./userpost.js. So the easiest way to remember what you're importing here is you're always going to import the html file associated with the template. And we are in the body.js file so we need to import the body.html file and then we need to import any Java Script file for other templates that we're referencing in our body.html file. We are referencing the user post template here so we need to import the user post JavaScript file. And that should get us where we need for our body.js file so we can save that. And now we can jump into userpost.js. Now as always we're going to import the template from the templating namespace and we're also going to import. Remember we're inside the javascript file for a template so we need to import the html file for that same template. So we're going to import ./userpost.html. And that should get us to where we need to be for the userpost file for now. Then we have our main.js file where we're still importing template and were still importing main.html. And in this case now we don't really need either one of these. So we can delete both of those. It works a little bit different for main.js, but for main.js right now really all we need is we need to point to our body template. Because remember the body template is always going to be used in main.js. So we need to import since the body is no longer in the main.html file, we need to tell Meteor where the body is now. Because we've moved it elsewhere. And it's located in a different folder now. So the main.js file is located in our client folder. So we need to say..and that will get us out of the client folder /imports/ui and then /body.js. We'll save that, and now we'll look at our website again and when it refreshes, sure enough we see that there are no errors in our console. And we see our four items loading in just fine. So that was a lot of work that we had to do in order to pull this content out and separate it into separate HTML and JavaScript files. But by doing that, that's gonna make our code a lot more flexible. And we're gonna find it easier to work with as we move forward. So thank you for watching. Once again, the changes made in this lesson will be saved in the site 005 folder. And I'll see you in the next lesson. Thank you for watching.

Back to the top