1.3 Application Setup

If you're just getting started with Meteor for the very first time, the first step to using it, of course, is to install the Meteor library. So I'm gonna head over to meteor.com, and you can see right down here we have this button Install Meteor 1.2.1. So I'll go ahead and click that. And assuming you're on MAC OS 10 or Linux, it's very easy to just copy this terminal command right here and paste it into your terminal. So that's what I'm going to do right now. Now if you're on Windows you can just download the the official Meteor installer right here, and it'll be very easy, just run that and you'll have Meteor installed. After you have it installed everything's gonna be the same on both Mac or Windows, so this is the only place where there's really any difference. So, I'm here on a terminal, and I'll go ahead and paste in that command and hit enter. And this is going to download the Meteor script and install it for us, this could take a couple of seconds. All right, so we've got Meteor installed now, and as you can see, it actually gives us a few instructions on how to set up our first application. And we're gonna follow these instructions. So, I'm gonna go ahead and move to my desktop, and then I'm going to run Meteor create, and we'll call it chess. And so it's going to create a chess project and it's going to install all the default packages. All right, so now let's cd into the chess directory and I'm going to run Meteor. And now you can see that it's starting up the Meteor server. The first time you do this will take a few seconds, but after this, whenever you make changes to any of your project files, Meteor will automatically recompile the project and reload the browser. So the server will make things really easy. So I'm going to leave our Meteor server running in this tab and create a new terminal tab, and I'll move into our project, and if I list the files, I can see that we have three files here. Chess.css, chess.html, and chess.javascript. Now Meteor has given us a very basic application. In fact, if we come over to the browser, and head to local host port 3,000, you can see we have a simple Welcome to Meteor application. If I click the button, you can see that the message here updates each time I click the button. And just in case you've never worked with a Meteor application before, let me show you the kind of code that we have here. I'll open the HTML file and you can see we have a basic head and body tag here. And then we have a template here named hello, and this template has a counter value interpolated inside of it. And this whole template here is being rendered with this syntax right here. Meteor uses its own blaze templating system by default, you can use other templating systems, like React, even within Meteor. However, we're going to stick with the default blaze. So this is the syntax for including another view, and this is the hello view. Now where does this counter value come from you ask. Well, if I open up chess.js, you can see there's kind of a bunch of stuff going on here, but notice that right here we have template.hello and that refers to this template named hello in our HTML. And we can add a helper to it and right here is the counter, we're just getting a session variable counter. And you can see down here we have template.hello.events, this is how we connect event handlers to a template. When the button is clicked we set the session variable counter by getting whatever it currently is and incrementing it by one. So even if you've never worked with Meteor before you can immediately see that there are some very basic principles. But don't worry about understanding everything I just said right now. I explain what this code did really quickly because we're going to be discussing all of these things in much more depth in the upcoming videos. This will just give you a little bit of a taste for the way that Meteor wires the different pieces together. Okay, so we have our basic application here and before we close out this video, I want to do one more thing. And that is remove a few packages and add one new package. So we can work with Meteor packages by saying meteor add or meteor remove. So the first thing we're going to remove is a meteor autopublish. The autopublish package just sends all of the data from our Meteor database in the back-end to our media front-end application. This is really great for your prototyping applications where you just want to quickly throw something together. However, we're gonna remove autopublish and look at the more secure way to choose exactly what data we want to send from the server to the client. The other package Meteor applications come with by default that is also primarily just for prototyping is insecure. So I'm going to say meteor remove insecure. And the insecure package gives us the ability to do all database operations from the front end. Of course, we don't want anyone on the front end having complete reign over performing any kind of actions on our database. So instead, we're going to remove the insecure package and we're going to choose exactly what operation should be allowed and from where they will be allowed. Okay, let's do one more thing and let's add a package, so I do meteor add And we're going to add, Twitter bootstrap. So the name for this package is twts, Twitter bootstrap and that's kind of just like the name space. A lot of packages have names spaces and then we're gonna say colon and then the word bootstrap and this is the bootstrap theme. This will be automatically packaged with our application and so we never have to add any CSS or JavaScript files. We can just go ahead and use the right class names in our application, and we'll automatically get bootstrap styling. So with these few packages in place, we're ready to start building our Meteor application.