Getting Started with Meteor.js JavaScript Framework

So we can remember where they are later, we'll put all the files for this book in the ~/Documents/Meteor folder. We need to create that folder:

$ mkdir ~/Documents/Meteor

Now, we want to be in that directory:

$ cd ~/Documents/Meteor

We can now use the Meteor create command with the --example parameter to create a local copy of the todos example application:

$ meteor create –-example todos

As with the Meteor installation itself, the create command script has a friendly success message:

todos: created.
To run your new app:
   cd todos
   meteor

How handy, there are even instructions on what to do next! Let's go ahead and do what our good command-line friend is telling us.

To start up a Meteor application, we need to be in the application directory itself. This is because Meteor is looking for the startup files, HTML, and JavaScript needed to run the application. Those are all found in the application folder, so let's go there:

$ cd todos

This puts us in the ~/Documents/Meteor/todos folder, and we're ready to run the application:

$ meteor

Yes, that's it. Meteor takes care of everything for us, reading all the files and scripts, and setting up the HTTP listener:

[[[[[ ~/Documents/Meteor/todos ]]]]]

Running on: http://localhost:3000/

We can now take the URL we've been given (http://localhost:3000/), and check out the example application in a web browser.

Open your favorite web browser (we'll be using Chrome, but any modern, updated browser will work) and navigate to http://localhost:3000/.

You should see the following screen, with a few todo lists already added:

You can go ahead and poke around the application if you'd like. Add a new item to a list, change lists, add a new tag, or mark items as complete. Go nuts, friend! Any changes we make in the future won't match exactly what you will have on your screen if you make a lot of changes, but you'll be able to follow along just fine.

Do you fear change, and want your screens to look exactly like our sample screens? No problem, just start with a clean instance.

As we learn the ins and outs of Meteor, we want to build a working application: something useful, and complex enough so that we can experience all the major features of Meteor. We will be building a Lending Library, where we can keep track of what items we have (for example, Mad Men Season 1), organize these items into categories (for example, DVDs), and keep track of the people to whom we have lent the items.

To see the beginnings of this, let's change the lists of todos to lists of items, and let's change the word list to category, because that sounds much more awesome.

First, make sure the application is up and running. You can do this by having an open browser window, pointing to http://localhost:3000/. If the app is running, you'll see your todos application. If your application isn't up and running, make sure to follow the steps previously given in the section Starting the example application.

Now, we need to open and edit the todos.html file. With your favorite text/code editor, open ~/Documents/Meteor/todos/client/todos.html.

This is Meteor in action! It's monitoring any changes to files, and when it sees that a file has changed, it's telling your browser that a change has been made, and that it should refresh itself to get the latest version.

Moving forward, we're going to build an application from scratch, so we don't want to make too many changes to this example application. However, we still want to at least clean up the other visible references to todo and list.