Getting Started With Meteor Tutorial (In the Cloud)
I've been pretty excited about Meteor since I first saw a demo of it, but it can be a little daunting to get started, so I thought I'd create a simple tutorial that can get you running in about 30 minutes or less.
I've included a YouTube video along with this blog post to help you get up-to-speed quickly.
What is Meteor?
Before we get started we should talk about exactly what Meteor is.
Meteor basically provides all the plumbing for you to build a Single Page Application or SPA, without you having to wire everything up and worry about syncing data and updating templates.
What is a cloud IDE?
When I first heard of a cloud IDE, I didn't really understand what it was–rather, I didn't grasp how valuable a cloud IDE was. A cloud IDE will let you develop and run an application completely in the cloud with your browser.
This means that you can log into your IDE from any web browser and start developing your application.
For Meteor, this is really neat because you don't have to install and run Meteor locally. You can utilize a Cloud IDE to run and develop a Meteor application completely on a Linux box in the cloud. You don't even have to know much about Linux.
Now, I found that most of the Cloud IDEs out there were a bit sluggish when trying to run a Meteor application on them. I had almost given up, until I discovered that I could hook up the Cloud9 IDE with my own more powerful Linux virtual machine that is hosted at Digital Ocean.
This setup was so fast and impressive that it is completely worth setting up, so in this tutorial, that is where were are going to start.
Getting set up
The first thing you'll need to do to get set up is to create a Digital Ocean account. Digital Ocean provides extremely cheap Linux virtual machines in the cloud. In fact, this website is hosted on a Digital Ocean machine that I pay $20 a month for (and it gets over 100k hits a month.)
Like I said before, you can just use the Cloud9 IDE by itself for running your Meteor app, but if you instead utilize a $10 / month Digital Ocean box, you'll find everything to run about 3-to-4 times as fast–no joke.
The other alternative is to download and install Meteor on your own Linux box or Mac, but I like how easy it is to develop in the cloud–especially since you can do real-time collaboration with another developer.
If you want to use your own machine and don't want to use a cloud IDE, just skip down to the section where we install Meteor and you can follow the same instructions, just on your own machine.
(By the way, the above link is an affiliate link–just wanted to let you know–so thanks if you sign up through it.)
Creating a Cloud9 account
Next, you'll need to create a Cloud9 account. You can just sign up for the free account for now, but if you want more private workspaces, you'll need to sign up for a paid account. I find the prices to be pretty reasonable though.
(By the way, the link for Cloud9 is not an affiliate link. They don't have an affiliate program, but I still recommend them, because they are awesome–especially when hooked up to a Digital Ocean box.)
Connecting Cloud9 with Digital Ocean
The next step is to create a new Digital Ocean box that we are going to use SSH to connect to from the Cloud9 IDE. Don't worry though, this is easier than it sounds.
Rather than repeating all the steps here, you can watch this excellent video that a Cloud9 developer put together that shows you exactly how to do it:
Now that we are all set up, we need to get Meteor installed. Fortunately, this is pretty easy. In fact, you can do it with a single command.
Just execute the following command at a terminal window:
curl https://install.meteor.com | /bin/sh
This command will pull down and execute a shell script which will install Meteor in your environment.
Yes, it really is that simple.
If you want to test out your Meteor install, execute the following command to create an example application that you can play around with:
meteor create –example leaderboard
This will create an example Meteor application called “Leaderboard.” Now, execute the following commands to switch to the Leaderboard project's directory and start the application:
If all is well, you should see Meteor start a MongoDB instance as well as itself. You can connect to your Leaderboard app by going to the IP address of your machine and port 3000.
If you are using a Digital Ocean box, just use the same IP address you used when you set up the SSH connection to Cloud 9.
Go ahead and play around with the Leaderboard example app and take a look at the code. To really see the power of Meteor, you'll want to open up two browser windows, each pointing at the app and see what happens when you make a change in one.
The Meteor tutorial app we are going to create
Ok, now we are ready to move on to creating our own Meteor application.
The application we are going to create is going to be a very simple TODO list application that we'll call “Spartan TODO.”
The application will have a very simple UI and have the following basic features:
- Show a list of items to be done
- Add a new item to the list
- Click an item to toggle it to and from a “done” state
- Double click an item to delete a done item (I'll leave this one for an exercise for you to do on your own.)
A pretty simple application, but it will take us through a pretty good cross-section of what Meteor can do. So, let's get started.
Creating the project
The first thing we need to do is to create a new Meteor project.
In order to do that we just need to go back a directory from the Leaderboard project and create our TODO list app project. In order to do that execute the following commands:
meteor create spartan-todo
This will create a default “Hello World” project for us in Meteor that we can modify to create our own project. Let's go ahead and start it up with:
Ok, so here is something pretty cool about Meteor: The whole time we are developing our application we can just leave it running. We can make changes to our application and–without having to recompile or restart the application–those changes will be applied live. We don't even have to refresh the web browser. This is pretty cool.
Point your browser to the address of your machine and port 3000 to see the application.
Go ahead and try changing some text in the HTML to see it update live.
What's in the Meteor tutorial project?
Before we move on, let's take a quick moment to talk about what is in the Meteor project we created.
If you look in the spartan-todo directory, you should see 3 files:
- spartan-todo.css – the style sheet file for our entire application
- spartan-todo.html – the main HTML file that will be displayed
Meteor is pretty flexible in how you structure your project. The default app template is a very simple project structure, which we'll stick with for this Meteor tutorial.
With this structure, you can expect the HTML file to be rendered using Meteor's templating language, Spacebars (very similar to Handlebars.js) You can define any templates you want your application to use inside this HTML file, or you could create additional HTML files that this main HTML file references. The name of the file doesn't matter, Meteor will just look for all the HTML files in your project and will actually create a single HTML document to be transferred to the client. But, for the purposes of this Meteor tutorial, you can ignore that. We are just going to use one HTML file.
We can use those functions to have code only run in the client or the server, if we need.
There is also a folder convention we can use that controls whether code runs on the client or server or both, but for now we'll ignore that and keep everything in these three files.
You can find the exact details on how this works in the Structuring your application section in the official Meteor documentation.
Creating the user interface
Now that we have a running Meteor tutorial application, the first thing we are going to do is create a hard-coded version of the UI that we'll be using in our application.
I always find it is best to start by just hard-coding all the HTML for a screen in an application, before going and adding real functionality. It makes things less confusing and you don't waste time trying to change layouts and code at the same time.
Open up your spartan-todo.html file and replace its contents with the following code:
This will create our basic user interface for our application. If you switch to your browser, it should auto-update and you should see something that looks like this:
The next step will be to go from having a completely hard-coded HTML page to an HTML page that uses hard-coded Spacebars templates. In Meteor, we can define templates in our HTML files in order to break up and abstract away parts of our application as well as allow for our HTML to be generated based on data from our application. For now, we are going to keep things pretty simple. We are just going to break apart our HTML into a couple of templates. Replace the contents of your spartan-todo.html file with the following code:
When you go back to your browser, you shouldn't see anything different, but now we are utilizing templates–just not very well.
Populating data with templates
The next step is to make it so the templates are actually being populated with data from our application. We are going to start off by hard-coding the data, in the application, but making it so the templates use that data to render the HTML.
Again, I like doing this baby-step approach–especially when starting out.
What we really want to do is make it so that the <li> elements we have in the HTML are not hard-coded, but are generated by some data that defines the items in our list.
We can do that in Meteor by utilizing the #each syntax in the Spacebars template.
Replace the content of your spartan-todo.html file with the following code:
What we've done here is replace the hard-coded list items with some templatized code that tells Meteor to loop through some collection of things called items and for each thing in that collection to write out a list item and a field from that item called “description.”
So, in order to get this template to work, we need to provide the template with a collection named “items” and the items in that collection need to have a field named “description” that has the description of the TODO list item we want.
Replace your spartan-todo.js file with the following code:
When Meteor renders the template, it will utilize the helper method to fill in the data the template needs.
After you've made this change and saved the file, your browser should automatically reload the changes, and you should see the new TODO list items we created.
Now, the data is still hard-coded, but it is coming from the actual application itself.
Populating data with collection
We still are hard-coding data and we have no way to add new items to our TODO list, but before we can fix that problem, we need to move the data down just one more layer and introduce an important concept in Meteor called “collections.”
Remember how I said Meteor uses a MongoDB as a document database for your application? Well, that is where we ideally would like to store our TODO list items.
In order to do that, we need to define a collection in our Meteor app, which we can use to populate our MongoDB and query it later to get TODO list items back out of it.
In Meteor, by default any collections we define on the server are also available on the client. What this means is that in your browser, you can actually interact with the application's MongoDB instance as if you were writing server code.
Meteor does this by creating a MongoDB proxy on the client side that forwards data down to the server. This MongoDB proxy is also kept in sync with the server instance by default. So, that means any data that exists on the server, can be accessed directly from the browser. (This is the default behavior, which you'll want to eventually turn off in your application and specify manually which data to sync, but for the purposes of this Meteor tutorial, we'll take advantage of this.)
Replace the contents of your spartan-todo.js with the following code:
There are two things we did here. First, take a look at line 1. Here we declared a new Meteor collection called items. Since this code is outside of the client and server blocks, it will be run on both the client and the server. We don't have to write the same code twice. This code will define a MongoDB collection we can use in our application. With a document database, like MongoDB, we don't have to declare what fields are on the collection or anything else.
Next, take a look at lines 13 through 22. What we are doing here is populating some default data if the MongoDB collection is empty. This will just give us some seed-data to work with. We could leave this code out, but if we did we wouldn't be able to tell if everything was working.
Finally, take a look at line 6. Here, we have updated our helper function for items to cal Find() on the Items collection to get its data instead of using the hard-coded values we had before. If you switch over to your browser, you should see the TODO list with the default items we added to the collection. Now that our application is being driven by real data in a database, we can add some actual real functionality to our Meteor application.
The first real bit of functionality we are going to implement will be to add new items to our list. In order to do this, we just need to add new items to our Items collection and Meteor will take care of the rest for us.
We'll need to utilize template events to execute some code when someone clicks the add button to add a new item to our list. In Meteor, we can define events on a template, just like we can define helpers. You can really think of these as event handlers, since we'll be writing code to handle different events that occur inside the template.
What we want to do is to define an event on the controls template that will be triggered when the form is submitting. This could happen when someone clicks add, or when they hit enter on the keyboard. In our event handling code, we'll want to cancel the default action of submitting the form to the server, since we'll handle everything in our client code.
Then, we'll want to get the description of the item from our text input and insert a new item into our Items collection. Meteor will know that there is a change in our collection and will respond by rerendering the affected part of the DOM in the browser. Meteor templates are by default “reactive” in this way and constantly watch for changes that would affect the HTML they rendered.
Replace the contents of your spartan-todo.js file with the following code:
Take a look at lines 10 through 17.
What we are doing here is adding an event handler for the “submit form” event. Whenever the form is submitted on the page, this code will be executed.
In this code, we are first canceling the default action, which is to post the form to the server.
Them, we use some JQuery to grab the value of the newItem text input and store it in a variable.
Finally, we insert a new object into the Items collection with the proper description.
After you save this code, you can go ahead and try it out. Add a few items to the list. You can also try opening a second browser and watching how the data is synced between both clients.
Marking items done
The last step we want to do in this Meteor tutorial is to make it so that we can mark items as done by clicking on them and unmark them by clicking a second time.
Again, we will need to use events to do this.
The basic idea will be to create an event handler that will respond to a list item being clicked in the list template that will toggle a “done” field on the item to indicate whether or not the item should be marked as done.
We'll use a CSS class that will apply a line-through to the list items marked as done.
Let's start with the CSS class. Just add the following line to your spartan-todo.css file:
Next, replace the contents of your spartan-todo.js file with:
Let's start by looking at lines 25 through 30.
What we've done here is created a new event handler for the list template that will trigger when a list item is clicked. This event handler will simply update the item in the Items collection by setting a “done” field on it to the opposite of what it was. This will result in the done field being set to true the first time it is clicked and from then on toggle between the two values.
How do specify which item we want to update?
Every object in our collection automatically gets a special field named “_id.” We can use this field to uniquely identify each item. But, how do we get a reference to the item?
You may have noticed the “this” keyword being used in this code. Whenever we are executing event handling code in a template, the this variable always points to the data that triggered the event. We automatically get the correct context, so when we refer to “this._id,” we get the ID of the object that represents the list item that was clicked on.
Notice also the special syntax we have to use to update an item and set a new field value in MongoDB. It might seem a little bit strange, but that is how it is done in MongoDB.
Next, take a look at lines 8 through 13.
Here we are defining a helper function called “doneClass” that will either return the string “done” or an empty string, depending on whether or not the item being evaluated when this helper is invoked in the template.
We can use this code to make it so the list template can assign our “done” class only to items that are marked as done.
In order to do this, simply replace line 15 in your spartan-todo.html file with the following code:
Save everything and open your browser and you'll find that you can now click on items to mark them as done and click on them again to mark them as undone.
The template calls our helper function “doneClass” to determine what text to insert into our class statement on each li element.
Ok, now it's your job to implement deleting items in our Meteor application.
I'll give you a bit of a hint. You can utilize the “dblclick li” event to make it so that whenever someone double clicks a list item it is deleted. See if you can figure out how to implement that functionality in the Meteor app.
Meteor tutorial wrap up
So, there you have it: a very simple TODO list application in Meteor. I've actually created a screencast you can watch to follow along, if you'd like. You can find it below:
If you happen to be in the Copenhagen area or are planning on attending the At the Frontend conference on Nov 4th 2014, I'll be there doing a “Getting Started With Meteor” session where I'll be creating this TODO list application and going over a little more about Meteor.
If you found this tutorial helpful, please share it with anyone who you think might be interested.
Also, join over 5,000 other developers who are part of the Simple Programmer community by signing up here. You'll get weekly emails with career tips, tutorials and other practical advice for software developers and special discounts on Simple Programmer products.
Some additional resources
And, I have created a Pluralsight course called “Meteor.js Fundamentals for Single Page Applications” that covers Meteor much more in-depth.