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

<p>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.<br /><br />"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.<br /><br />"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.<br /><br />You will learn about reactive programming and how Meteor takes advantage of the latest web technologies. You will gain a solid understanding of what&nbsp; 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.<br /><br />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.</p>
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, 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