Book Image

Getting Started with Meteor.js JavaScript Framework

By : Isaac Strack
Book Image

Getting Started with Meteor.js JavaScript Framework

By: Isaac Strack

Overview of this book

Table of Contents (14 chapters)

Loading an example application


The wonderful people at Meteor have included several example applications, which you can quickly create and play with; these help you to get a better idea of what Meteor is capable of.

We want to use the simplest possible example, just to get an idea of how Meteor works, so we will be creating the leaderboard example. We'll be using the command line again. This is awesome news if you still have it open! If not, open a terminal window and follow these steps.

Selecting your file's location

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

$ mkdir ~/Documents/Meteor

Now, we need to get to that directory. Use the following command:

$ cd ~/Documents/Meteor

Loading the example application

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

$ meteor create –-example leaderboard

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

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

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

Starting the example application

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

$ cd leaderboard

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

$ meteor

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

[[[[[ ~/Documents/Meteor/leaderboard ]]]]]

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.

Previewing the application

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 a screen with a list containing the names of scientists, similar to the following screenshot:

You can go ahead and poke around the application a bit, if you want to. Click on Nikola Tesla's name and add 5 points to his score about 20 bajillion times, because he deserves it. Give some love to Marie Curie because she was so radioactive that she actually made up the word. Go nuts, friend!

Help! I made too many changes!

Do you fear change and want to reset the scores? No problem, we can start with a clean database instance; to do this, perform the following steps:

  1. Open the command line, and press Ctrl + C.

  2. This stops the running application. Now, enter the following command:

    $ meteor reset
    
  3. Restart your app, and you're good to go. Just type the following command:

    $ meteor
    

Note that the initial scores are random, so it won't look exactly like it did before. The meteor reset command resets all the data collections and whatnot; so in a non-random app, the command will indeed reset the app cleanly.