About this book

Meteor is a brand new platform built entirely in JavaScript that allows you to build modern, dynamic web applications in the blink of an eye. With support for nearly every popular JavaScript framework (and more being added every day), Meteor provides you with the ability to quickly and easily develop sophisticated and stylish web applications.

"Getting Started with Meteor" is an easy to follow, step-by-step approach to learning how to build modern web applications with Meteor. Through the development of a complete and ready-to-use application, you will experience exactly how easy and fast it can be to develop robust, flexible web applications, so you can build your own “killer” app in no time.

"Getting Started with Meteor" will walk you step-by-step through all the major advantages that Meteor has to offer. You’ll be up and running in less than two minutes, and will develop an actual application you can use. As you move quickly through the exercises, you’ll be able to experience first-hand how easy it is to develop in Meteor, and will gain invaluable best practices you can apply immediately to your coding projects.

You will learn about reactive programming and how Meteor takes advantage of the latest web technologies. You will gain a solid understanding of what  the best design patterns are for developing web apps, and when to use them. You will learn how Meteor uses HTML templates and NoSQL (document-based) databases together to make coding applications simple and fun. Finally, you’ll gain best practices for security and performance, making your web applications fast, secure, and easy to use. If you want to build a web application but hate how difficult it seems to be, this book will show you the easy way to build and deploy modern web apps.

This book will teach you everything you need to know to get up and running with Meteor, and start you on your way to becoming an expert web applications developer.

Publication date:
December 2012
Publisher
Packt
Pages
130
ISBN
9781782160823

 

Chapter 1. Setup and Installation

Under the hood, Meteor is really just a bunch of files and scripts, designed to make the building of a web application easier. That's a terrible way to describe something so elegant, but it helps us better understand what we're using.

After all, Mila Kunis is really just a bunch of tissue wrapped around bone, with some vital organs inside. I know you hate me now for that description, but you get the point. She's beautiful. So is Meteor. But it doesn't do us any good to just leave it at that. If we want to reproduce that type of beauty on our own, we have to understand what's really going on.

So, files and scripts… We're going to walk through how to get the Meteor package properly installed on your Linux or Mac OS X system, and then see that package of files and scripts in action. Note that Windows support is coming, but as of the time of this writing, only the Linux and Mac versions are available.

In this chapter, you will learn:

  • Downloading and installing Meteor via curl

  • Loading an example application

  • Making changes and watching Meteor in action

 

Installing with curl


There are several ways to install a package of files and scripts. You can manually download and transfer files, you can use a pretty installation wizard/package with lots of "next" buttons, or you can do what real developers do, and use the command line. It puts hair on your chest. Which, now that I think about it, may not be a very desirable thing. Okay, no hair; I lied. But still, you want to use the command line, trust me. Trust the person that just lied to you.

curl (or cURL if you want to get fancy) is a command-line tool used to transfer files and run scripts, using standard URL locations. You probably already knew that, or you probably don't care. Either way, we've described it and we're now moving on to using it.

Open a terminal window or the command line, and enter the following:

$ curl https://install.meteor.com | /bin/sh

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

This will install Meteor on your system. curl is the command to go and fetch the script. https://install.meteor.com is the URL/location of the script, and /bin/sh is, of course, the location of the script interpreter "Shell", which will run the script.

Once you've run this script, assuming you have an Internet connection and the proper permissions, you will see the Meteor package download and install:

The key thing we're looking for in the preceding installation text is the location of Meteor:

Installing Meteor to /usr/local/meteor

This location will vary depending on if you're running this in Linux or Mac OS X, but it puts Meteor into a location where you can then access the Meteor script from anywhere else. This will become important in a minute. For now, let's see what kind of friendly message we get when the Meteor installation is finished:

Meteor installed! To get started fast:

  $ meteor create ~/my_cool_app
  $ cd ~/my_cool_app
  $ meteor

Or see the docs at:

  docs.meteor.com

Great! You've successfully installed Meteor, and you're on your way to creating your first Meteor web application!

Tip

You should bookmark http://docs.meteor.com ­ as an invaluable reference moving forward.

 

Loading an example application


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

For the application we will build, the todos example is the closest fit, so we'll go ahead and build off of that example. We'll be using the command line again, so awesome news if you still have it open! If not, open a terminal window, and follow these steps.

Selecting your file location

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

Loading the example application

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.

Starting the example application

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.

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 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.

Help! I made too many changes!

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

  1. At the command line:

    Ctrl + C
    
  2. This stops the running application. Now go up one directory:

    $ cd ..
    
  3. Remove the todos application:

    $ rm –R todos
    
  4. Create the todos example application again:

    $ meteor create --example todos
    
  5. Change to the new directory, start Meteor, and you're good to go:

    $ cd todos
    $ meteor
    
 

Making code changes


Okay, we've got our application up and running in the browser, and we now want to see what happens when we make some code changes.

One of the best features of Meteor is reactive programming and hot code pushes.

The following is from http://docs.meteor.com/#reactivity:

Note

Meteor embraces the concept of reactive programming. This means that you can write your code in a simple imperative style, and the result will be automatically recalculated whenever data changes that your code depends on.

Put even more simply, this means that any changes you make to the HTML, JavaScript, or database are automatically picked up and propagated.

You don't have to restart the application or even refresh your browser. All changes are incorporated in real time, and the application reactively accepts those changes.

Let's see an example.

Changing from todos to items

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.

  1. Change title in the head section:

    <head>
      <title>Items</title>
    </head>
  2. Go ahead and save the file, and look at your web browser. The page will automatically refresh, and you'll see the title change from Todos:

    The title will now display the word Items:

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.

  1. Back in your text editor, make the following change to the <h3> tag (located approximately around line 20):

    <template name="lists">
      <h3>Item Categories</h3>

    Save this change, and you'll see the change reflected in your browser. The left header originally displayed the following text:

    It will now have changed to the following:

  2. We need to deal with one more area, and we've successfully turned our todos application into an items application.

    If you noticed, in the bottom of the Categories list, the open box currently says New list:

    We need to change this to say New category instead. Make the following code change on line 39:

    <div id="createList">
      <input type="text" id="new-list" placeholder="New category" />
    </div>
  3. Save your changes, and check your work:

 

Summary


Great success! In this chapter, you've successfully installed the Meteor framework, loaded an example application, and made changes to that application, becoming familiar with file changes and the reactive nature of Meteor. You are now ready to start building your very own Meteor application, and learn more of the elegant features and advantages that come from developing with Meteor.

About the Author

  • Isaac Strack

    Isaac Strack is a design technologist and STEM education advocate, currently working as a solutions consultant for Adobe Systems. With more than 15 years of experience in management information systems and web and creative technologies, Isaac has a strong background in modern web application development. He is the author of the Packt Publishing book Meteor Cookbook and the Packt Publishing video series Learning Meteor Application Development; he also assisted recently as a technical reviewer for another Packt Publishing book named Building Single-page Web Apps with Meteor. He holds a patent for online fraud detection and is a co-captain of the Salt Lake City Meteor Meetup group. He is an experienced lecturer/speaker. Isaac regularly mentors others at boot camps, training events, and conferences, such as UtahJS, DevMountain Meteor Day, NMC Summer Conference, Adobe workshops/events, and the Consumer Electronics Show (CES).

    Browse publications by this author

Latest Reviews

(1 reviews total)
Did not work for windows 10 and customer service could not explain why
Book Title
Access this book, plus 7,500 other titles for FREE
Access now