What do you get with eBook?

Instant access to your Digital eBook purchase

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Getting Started with Meteor.js JavaScript Framework - Second Edition

Chapter 1. Setup and Installation

Under the hood, Meteor is really just a bunch of files and scripts, which are designed to make the building of a web application easier. That's a terrible way to describe something so elegant, but it helps us to 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 you through how to get the Meteor package properly installed on your Linux or Mac OS X system, and then see the package of files and scripts in action.

Note

Windows is now officially supported (Yay!) so you can follow along using the new Windows installation if you would like. Information can be found at https://www.meteor.com/install.

In this chapter, you will learn the following topics:

Downloading and installing Meteor via curl
Loading an example application
Making changes and watching Meteor in action

Installing using 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; we lied. But still, you want to use the command line, trust us. Trust the people 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 command:

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

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 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 downloaded and installed:

The key thing that we're looking for in the preceding installation text is the launcher script location:

Writing a launcher script to /usr/local/bin/meteor

This location could vary depending on whether you're running this script 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:

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 create your first Meteor web application!

Note

You should bookmark http://docs.meteor.com, 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; these help you to get a better idea of what Meteor is capable of.

We want to use the simplest possible example, just to get an idea of how Meteor works, so we will be creating the leaderboard example. We'll be using the command line again. This is awesome news if you still have it open! If not, open a terminal window and follow these steps.

Selecting your file's location

So that we can remember where they are later, we'll put all the files for this book in the ~/Documents/Meteor folder. We will create this folder as follows:

$ mkdir ~/Documents/Meteor

Now, we need to get to that directory. Use the following command:

$ 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 leaderboard example application:

$ meteor create –-example leaderboard

As with the Meteor installation itself, the create command script has a friendly success message:

leaderboard: created.
To run your new app:
   cd leaderboard
   meteor

There are even instructions on what to do next. How handy! 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 looks for the startup files, HTML, and JavaScript that are needed to run the application. These are all found in the application folder, so let's go there:

$ cd leaderboard

This puts us in the ~/Documents/Meteor/leaderboard folder, and we're ready to run the application:

$ meteor

Yes, that's it. Meteor takes care of everything for us; it reads all the files and scripts, and sets up the HTTP listener:

[[[[[ ~/Documents/Meteor/leaderboard ]]]]]

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 a screen with a list containing the names of scientists, similar to the following screenshot:

You can go ahead and poke around the application a bit, if you want to. Click on Nikola Tesla's name and add 5 points to his score about 20 bajillion times, because he deserves it. Give some love to Marie Curie because she was so radioactive that she actually made up the word. Go nuts, friend!

Help! I made too many changes!

Do you fear change and want to reset the scores? No problem, we can start with a clean database instance; to do this, perform the following steps:

Open the command line, and press Ctrl + C.
This stops the running application. Now, enter the following command:
```
$ meteor reset
```
Restart your app, and you're good to go. Just type the following command:
```
$ meteor
```

Note that the initial scores are random, so it won't look exactly like it did before. The meteor reset command resets all the data collections and whatnot; so in a non-random app, the command will indeed reset the app cleanly.

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. The following extract is taken from http://docs.meteor.com/#/full/reactivity:

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.

This principle applies to code changes too, which means that any changes that 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 the changes.

Let's see an example.

Changing from Leaderboard to Yay Science!

As you become more familiar with Meteor, you will come to learn that you can make changes and add files pretty much whenever you want. You don't have to link anything up, and you certainly don't have to redeploy before you can see the results. You get to just play around, build wonderful things, and let Meteor take care of all the crunchy stuff.

To see what we mean, let's change the title of this application from Leaderboard to Yay Science! because, well, yay science!

First, make sure that the application is up and running. You can do this by having an open browser window that is pointing to http://localhost:3000/. If the app is running, you'll see your leaderboard application. If your application isn't running, make sure to follow the steps previously given in the Starting the example application section.

Now, we need to open and edit the leaderboard.html file. With your favorite text/code editor, open the leaderboard.html file under the location, ~/Documents/Meteor/leaderboard/client/, and change title in the head section using the following lines of code:

<head>
  <title>Yay Science!</title>
</head>

Go ahead and save the file, and then look at your web browser. The page will automatically update, and you'll see the title change. Earlier, it displayed the word Leaderboard:

Changing from Leaderboard to Yay Science!

However, now, after the execution of the preceding code, the title will display our spiffy new Yay Science! page:

This is Meteor in action! It monitors any changes to files, and when it sees that a file has changed, it tells 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 stay with our new theme rather than that generic old leaderboard stuff. So, to do so, perform the following steps:

Back in your text editor, on about the tenth line or so, we have the title label for our leaderboard. Make the following change to the <h1> tag:
```
<h1 class="title">Yay Science!</h1>
```
Save this change, and you'll see the change reflected in your browser. The title in our page will now look like this:
Likewise, we don't give "points" to scientists. They're not trained monkeys, dancing around for our amusement. They're scientists! We give them mad props instead. In the <div> tag just below our title, make the following text change:
```
<div class="subtitle">Select a scientist to give them props</div>
```
We also need to change the button text from the word points to the word props. Towards the bottom half of the file, you'll find a <button> tag. Change the text in that tag to the following:
```
<button class="inc">Give props</button>
```
Save your changes, and you will see the application update almost immediately:
Just below the <button> tag, there is a message displayed if no scientist's name is selected. It currently uses the word "players". We want to change that to something a little more specific. To do this, make the following change to the <div> message tag:
```
<div class="message">Click a name to select</div>
```
Save this change, and this time, refresh your browser. Not because we need the change to take effect, but because we want to make sure no scientist is highlighted so that we can verify our message text:

What do you get with eBook?

Instant access to your Digital eBook purchase

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

€24.99

Object-Oriented JavaScript - Second Edition

€41.99

Getting Started with Meteor.js JavaScript Framework - Second Edition

€21.99

Total € 88.97

David Nunez Aug 14, 2015

This is an excellent introduction to Meteor. The book is short yet the content covered here is more than adequate. The author is a good teacher as well, incrementally introducing the reader to new concepts with a playful tone and he seems adept at anticipating the thought patterns and confusion points for beginners.Sometimes, computer science authors write their books too much like their code itself, defining all their concepts up front (the way they would declare and set values for all the variables at the beginning of a function) and then expanding upon each piece in the section that follows. This pattern is not best for the reader: it's hard to get into a rhythm with the author and results in having to go back to the earlier portions of the book or chapter to re-read the way the author define their concepts as they finally start to sink in. I personally appreciate it when an author tries instead to establish a good flow and introduces ideas dynamically, at the time when each idea can be most appropriately introduced and can be reinforced most effectively by the surrounding content. This author seems to understand this pattern better than most and it makes him a good teacher for it.What I enjoyed most about this book was the structure of the content, chapter by chapter. The book begins by trying to get you up and running with Meteor and building a simple application as quickly as possible, and its amazing how simple it is to get to that point! It isn't until the third chapter that you go through the necessary high-level discussions of the Meteor framework, the needs it addresses, the history of MVC-like patterns in web development, etc., and in most computer science books I believe you'd be reading through this stuff up-front, anxiously waiting to get started and see it in action. But this book has such a nice flow to it because discussions like these come at the appropriate time and have a reinforcing effect rather than leaving you feeling like "okay, get on with it and let's see some code". The latter half of the book then builds upon the earlier, simple application with more realistic looking UI design, C.R.U.D. operation implementation, authentication, robust configuration of role-based event broadcasting and database access, and finally to deployment. So you can definitely say the content here is covered from basics to basic tour of high-level concepts.It's hard to be overwhelmed by what seems to be a glut of JavaScript frameworks out there, but after reading this book I think it would be even harder for one not to feel extremely excited by this one. Meteor is a full-stack JS framework and streamlines many high-level patterns and technologies that you'd end up implementing by hand in many other frameworks (or at least be mildly challenged to gather them all together with existing modules). Web socket integration (in a publish/subscribe pattern) between your data-store (by default is setup for you in Meteor as MongoDb) and client-side JS, the ability to operate offline, single-command project creation, single-command deployment, automatic file watching (live reload), easy 3rd party package integration (again, with a single command), and isomorphic JS are all available to you out-of-the-box with Meteor. I suppose Angular is following suite with Firebase, but - as the author mentions in the final chapter - you can even integrate Meteor with Angular or React if you prefer them as front-end clients. It's almost as if Meteor can be the glue that holds together many scattered technologies and techniques you've learned over the years in JS and allow you to focus instead on development.

Amazon Verified review

Elliott Porter Aug 12, 2015

I'd heard a great deal about Meteor and discovered this new book from Packt. Such a fantastic introduction to an amazing technology. As the previous review explains an understanding of JavaScript is advisable but even without it this book provides a fantastic introduction to Meteor. I am still stunned at how effective this technology is and its ease of implementation. The book gets you up and running very quickly. I'm already planning to use Meteor within projects for my clients. This is another great addition to my ever growing Packt library. Highly recommended

rkk Aug 12, 2015

I bought this book a few weeks ago and can thoroughly recommend the content. If you're familiar with other frontend frameworks such as AngularJS then this book will be really useful for you. There's a really good introduction as to how Meteor works as both a back-end and frontend framework - with a simple to understand MongoDB tutorial that'll get you working with databases really quickly.Further into the book there are some more complex tutorials where a more advanced knowledge of javascript would be beneficial to understand the loops, functions and checks that take place for validation of data etc. I would recommend this book in combination with other Node.js books to really get a grasp on what is becoming one of the most popular up and coming languages in the web industry.

Bharat C. Ruparel Aug 12, 2015

I have Isaac strack's Packtpub video on Meteor, his Meteor Cookbook and now this, so I am a bit familiar with his teaching style :)There is no question that Issac knows his stuff well. This book is very good like his video and the cookbook. However, it is not titled appropriately. There is beginning material and then more advanced material mixed together. I have been working with Meteor for the last few months so I am a bit familiar with it. Without that knowledge, it would be difficult climb for a beginner as far as this book is concerned. But if you use this book in combination with other books and materials available on the web, then it is quite useful.As far as the code that comes with the book, it works fine with a few minor glitches here and there. But I am experienced enough in Meteor to work through them. I am not sure if a rank beginner can do that. My constructive criticism of the code is that it can be refactored quite a bit to make it clearer, but may be the author had a page count limit on the book or something similar.

rdagger Oct 09, 2015

I think the subtitle Learn to develop powerful web applications in minutes with Meteor is a bit of a stretch. This is a brief introduction to Meteor. It will get you started, but you can get a comparable intro if you just go to the Meteor website and do their free To-do app tutorial. It would be difficult to find a comprehensive paper book because the platform is evolving so rapidly. The best resource I’ve found so far is the eBook by Discover Meteor which has been frequently updated although it is currently only Iron Router and Blaze (no Flow or React).

Getting Started with Meteor.js JavaScript Framework - Second Edition: Learn to develop powerful web applications in minutes with Meteor

What do you get with eBook?

Getting Started with Meteor.js JavaScript Framework - Second Edition

Chapter 1. Setup and Installation

Note

Installing using curl

Note

Loading an example application

Selecting your file's location

Loading the example application

Starting the example application

Previewing the application

Help! I made too many changes!

Making code changes

Changing from Leaderboard to Yay Science!

Summary

Page 1 of 5

Description

Who is this book for?

Product Details

What do you get with eBook?

Product Details

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs

Getting Started with Meteor.js JavaScript Framework - Second Edition: Learn to develop powerful web applications in minutes with Meteor

What do you get with eBook?

Contact Details

Billing Address

Description

Who is this book for?

Product Details

What do you get with eBook?

Contact Details

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs