7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 19Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Making Simple Changes

With your Meteor web app running, in this lesson, you will make changes to your code and watch as your browser immediately refreshes.

3.1 Making Simple Changes

Hello and welcome back. Now that we've got our Meteor app running. Again, if it's not running in your browser, all you need to do is to navigate into the directory that has your Meteor web project in it and then type in the word Meteor. And it will start running that server and then navigate to localhost:3000. So we can see the default site here as we saw in the last lesson. But let's go to file explorer here and I'm gonna open up socialite using Visual Studio Code. You can use whatever code editor you wanna use. I'm just gonna use this one, cuz I'm used to it. So I'm gonna drag it over. And here is our folder structure here. Now, as I mentioned before we're not get into a lot of these folders in this course. This is a very surface level course, but we do wanna pay attention to the client folder and pretty soon we'll take a look at the server folder as well. But for now let's just jump into the client folder. Your main.html file is the main file that we're seeing in our browser right now. And you'll see that there are no HTML tags, there's no doc type or anything like that. It starts with a head tag, then we have a body tag, and then we have a couple of template tags. These template tags are using Blaze, which is the front end framework that comes with Meteor. And it allows us very easily to create templates and inject them into our HTML. As you're gonna see things like this a lot, we have a template, and this template has a name of hello. And then we can inject the contents of this template into the body of our document using syntax like this. So we have double curly brackets, which for Meteor is called space bar syntax. And then we have a greater than sign and then the name of the template. Now, any time we inject some kind of logic into our pages using Meteor, we're gonna be using this space bar syntax. So you can see it down here when we're pointing to this variable called counter. So we'll see that double curly bracket syntax whenever we're injecting logic into our HTML. And when we're injecting an actual template we'll also see this greater than sign there. That's how we inject a template. So if we were to take this template here, this double curly brackets with a hello in it and copy it. And then go to the next line and paste it and save our file. If we then jump back into our browser, we don't even have to refresh our browser. In just a moment, we'll see that the browser will refresh on its own and now we see two instances of that particular template. So you can reuse templates. So let's jump back into our code, and let's get rid of that second one there. And we can edit any of this code, for example, our title here. If we wanted this to look a little better, we could just type it out without the dash in the middle. And we could save that, and again, jump into our browser and it automatically updates. We can see the title bar has changed and we can see we're back to just one template here. You'll also notice that if we make any changes to our CSS that those changes will automatically update the browser as well as soon as we save our file. So if we decided for some reason to put a red background color, if we can spell it right. On our body and save that, our browser will reload and we'll see that red background color. So as we move forward in this course, we're going to spend a lot of time in the client folder, again the server folder. And we're also going to create another folder called imports where we're gonna put some more HTML and JavaScript files. So thank you for watching and we'll move forward in the next lesson.

Back to the top