Chapter 3: Projects

Projects

In this book, we’re going to build Leaderboard, an application from the Meteor Development Group that was originally designed to show off Meteor’s features.

Here’s what the application looks like:

Leaderboard has been replaced by more advanced examples on the official website, but we’re going to build this project for two reasons:

Reason #1: The application already exists. This means we can get a good idea of what we’re trying to build before we write a single line of code.

Reason #2: The application is simple. This means we don’t have to think too hard about the conceptual aspects of building software, which is usually the most difficult part. Instead, we can focus purely on learning Meteor itself.

To get hands-on time with Leaderboard, visit leaderboard.meteortips.com.

The application doesn’t have a lot of features, but it’s important that you play around with it for a couple of minutes and notice that:

  • There’s a list of players.
  • Each player has a name and a score.
  • Players are ranked by their score.
  • Users can select players by clicking them.
  • Users can increment a player’s score by clicking the “Give 5 Points” button.

In later chapters, we’ll add our own features to the application, but even building the application’s original features will give us plenty of room to cover Meteor’s most interesting functionality.

Create a Project

To create a Meteor application, we need to first create a project, and when working with Meteor, a project is the self-contained set of files that form the foundation of an application. You can use the words “project” and “application” interchangeably, but “project” is better-suited for talking about an application as it’s being developed.

Every project is unique, but most will contain:

  • HTML files, to create the interface.
  • CSS files, to assign styles to the interface.
  • JavaScript files, to define application logic.
  • Directories, to keep everything organized.

A project can contain other types of files, like images and CoffeeScript files, but we’re going to keep things as simple as possible in this book and only work with what we need.

Before we create a project for the Leaderboard application, let’s create a directory to store our Meteor projects. We don’t have to do this, but it’s good practice to keep our projects in one location.

We could, of course, use the “New Folder” option from the “File” menu, but instead, we’re going to use the command line.

Inside the command line, write:

mkdir Meteor

Then tap the “Return” key.

This mkdir command stands for “make directory”, and as you can probably guess from the name, it allows us to make a directory. In this case, we’re making a directory named “Meteor”.

The precise location where the directory will be created will depend on your operating system. At least on Mac OS X though, it will appear inside the “Home” directory by default. If you can’t find the project’s directory, locate it using the search functionality on your computer.

To navigate into this newly created directory, enter the following command into the command line:

cd Meteor

This cd command stands for “change directory”, and it’s the command line equivalent of double-clicking on a directory from inside a graphical interface, so after tapping the “Return” key, we’ll be inside the “Meteor” directory.

To create a Meteor project inside this directory, run the following command:

meteor create leaderboard

And this command has three parts:

  • The meteor part defines this as a command specific to Meteor. All commands specific to Meteor will start with this meteor keyword.
  • The create part defines the action we want to take. In this case, we want to create a project.
  • The “leaderboard” part is the name we’re assigning to the project. You can, however, name the project whatever you like.

Tap the “Return” key to execute the command.

Once executed, a directory named “leaderboard” will appear inside the “Meteor” directory that we created a moment ago. This new directory is our Meteor project, and by default, it will contain the following file structure:

  • client/
    • main.css
    • main.html
    • main.js
  • server/
    • main.js
  • package.json

For the sake of simplicity though, we’re going to delete these files in a moment and start from scratch. That way, we can build everything from the ground-up.

Note: The project directory also contains a hidden folder named “.meteor”, but if your operating system hides this folder, that’s fine. This folder contains the Meteor framework itself and there’s no reason for us to touch it.

Local Servers

Web applications are not like static websites. We can’t just open the “main.html” file and see a working application in our web browser. In fact, if we open that file in the browser, we’ll only see some static text.

To get the application working, we need to launch what is known as a local server, and a local server is a web server that runs on our local machine.

The local server is included with Meteor, and it lets us see the processed results of our JavaScript code during the development process, and also lets us interact with a database that’s included with every Meteor project.

If you’ve ever used an application like MAMP for development with PHP and MySQL, this will be a familiar process. If not, don’t worry. In practice, it’s all quite simple.

To startup the local server the project we’ve created, navigate into the “leaderboard” directory with the cd command:

cd leaderboard

Then run the following command:

meteor run

Here, the meteor part defines this as a Meteor command, and the run part clarifies the precise action we want to take. In this case, we’re looking to run the local server.

After tapping the “Return” key, the following output should appear in the command line:

=> Started proxy.
=> Started MongoDB.     
=> Started your app.
=> App running at: http://localhost:3000/

These lines confirm that the local server has started, and the URL on the last line of the output – http://localhost:3000 – is the URL we can now visit to see our Meteor project in the browser.

Copy the address to the clipboard and paste it into the browser.

You should see the following:

This application is the result of the code that’s included with every Meteor project by default, and while it’s not an interesting application, we’ve taken an important step in the right direction.

To continue seeing the results of our code, we’ll need to keep the local server running. This means leaving the command line open from this point onward. You will, however, need to open a separate tab or window for the command line to continue entering commands.

To stop the local server at any point, either quit out of the command line entirely, or with the command line in focus (and the local server’s output on display), tap the CTRL + C keys on your keyboard. You can then start the local server again by using the same meteor run command from before. Just make sure you’re inside the project’s directory before doing so.

Default Application

The default application is nothing special, but each time we click the “Click Me” button, the number on the screen will increase. This is a very basic demonstration of Meteor’s real-time features. The code behind this application, however, isn’t precisely important, since we’re going to cover a much greater scope in the coming chapters anyway.

For the time being, delete everything inside the “leaderboard” directory and create the following three files within that same directory:

  • leaderboard.css
  • leaderboard.html
  • leaderboard.js

It’s worth mentioining that, in this case, the name of the files isn’t important. Certain names can be used to affect the order in which the files are loaded, but that’s not relevant at this stage.

Open all of the files in a text editor and, inside the JavaScript file, write the following line:

console.log("Hello world");

Then save the file and switch back to the browser.

The first thing you’ll notice is that, the changes we’ve made to the project’s files have already been reflected in the browser. This is because, every time we make changes to the project, the results of those changes will be pushed to the browser without our intervention.

The second thing worth noticing requires that we open the JavaScript Console from inside Google Chrome. To do this:

  1. Click on the View menu.
  2. Hover over the Developer option.
  3. Select JavaScript Console.

Here’s what that looks like:

A pane will appear at the bottom of the browser window and display the “Hello world” text that we just passed into the console.log statement.

If this is familiar, fantastic. But if not, know that console.log statements are used to see the output of code without creating an interface to display that output. This means that, before we invest time into creating an interface, we can confirm that our code is working as expected. We can also use the Console to manipulate a project’s database, which is something we’ll do in the next chapter.

Leave the Console open from this point onward, but delete the console.log statement from inside the JavaScript file. We no longer need it.

Summary

In this chapter, we’ve learned that:

  • Before building a web application, it’s important to have a clear idea of what exactly you’re trying to build.
  • The command line can be used to quickly achieve various tasks, like creating folders and navigating between them.
  • While developing a Meteor application, we refer to it as a “project”, and we can create a Meteor project with the meteor create command.

To gain a deeper understanding of Meteor:

  • If you haven’t already, play around with the Leaderboard application. Make sure you have a very firm grasp of how it works.
  • Close the command line application, and then open it again and get back to where you previously were. You should be able to navigate into the project’s folder with the cd command, and start the local server with meteor run.

To browse the project’s code in its current state, click here.