Chapter 3: 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.
- 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:
Then tap the “Return” key.
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 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:
meteorpart defines this as a command specific to Meteor. All commands specific to Meteor will start with this
createpart 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:
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.
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.
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
Then run the following command:
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
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.
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:
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.
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.
- Click on the
- Hover over the
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
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
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
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
cdcommand, and start the local server with
To browse the project’s code in its current state, click here.