2

Meteor and React

Build a Complete Application Using Meteor 1.4 and React

Ken Rogers
ii
Contents
Preface v

1 Introduction 1
1.1 What to expect . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 What we are learning . . . . . . . . . . . . . . . . . . . . . . 2
1.4 What we wont be covering . . . . . . . . . . . . . . . . . . . 5
1.4.1 Apollo . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4.2 Redux . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4.3 Mantra . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5 Some nal notes . . . . . . . . . . . . . . . . . . . . . . . . . 6

2 Project Planning 9
2.1 Planning Out Our Application . . . . . . . . . . . . . . . . . 10
2.1.1 User system . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.2 The Dashboard . . . . . . . . . . . . . . . . . . . . . 10
2.1.3 Add Beer Module . . . . . . . . . . . . . . . . . . . . 11
2.1.4 Buddies . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2 Data Structure . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2.1 Our Collections . . . . . . . . . . . . . . . . . . . . . 12

3 Project Setup 15
3.1 Directory Structure . . . . . . . . . . . . . . . . . . . . . . . 17
3.1.1 Client . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.1.2 Server . . . . . . . . . . . . . . . . . . . . . . . . . . 18

iii
iv CONTENTS

3.1.3 Imports . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.1.4 api . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.1.5 startup . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.1.6 ui . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.2 Setting Up Our Data . . . . . . . . . . . . . . . . . . . . . . 20
3.3 Setting Up Our Routes . . . . . . . . . . . . . . . . . . . . . 22
3.4 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

4 Setting Up Our User System 25

4.1 Creating the Layout and Routes . . . . . . . . . . . . . . . . 25
4.2 Creating the Login/Registration Page . . . . . . . . . . . . . . 28
4.3 Creating Out User System . . . . . . . . . . . . . . . . . . . 29
4.4 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Preface
As many of you know, this project has been a long time coming. I wrote the
original version of Meteor and React and it was very well-received. Unfortu-
nately, I was a rookie author then and made a lot of mistakes. I over-promised
and under-delivered quite a bit.
With this new version, Im hoping to remedy that. Meteor, while being
very easy to work with and use, has a complex ecosystem, and doesnt have
any rigid rules or systems for doing things.
This book is my attempt at creating a go-to resource for learning how to
develop applications with Meteor and React. I wanted to make it accessible to
everyone, which is why I am making the HTML version free.
Id like to thank Michael Hartl of the Rails Tutorial for paving the way
for this style of book writing and marketing, and for creating Softcover, the
software that allowed me to make this book. If it wasnt for him, this whole
thing would have taken way more time and probably wouldnt have turned out
very well.
I really think this new version is going to be a fantastic resource for learning
how to build apps with these two frameworks, and I cant wait to hear what you
think and see what you make.
Lets get started.

v
vi PREFACE
Chapter 1

Introduction
Welcome to Meteor and React! If you read the rst version of my book, then
you know this version has been a long time coming. Im super excited to nally
be getting it out to the world. I really think its a great way to learn these two
great JavaScript frameworks.

1.1 What to expect

In this rst chapter Ill be going through some details about what well be
learning in this version of the book, as well as some stuff you need to know
about the book itself.
First off, Im going with a Rails Tutorial style format for this book. That
means that there will be a free HTML version with the option to pay to get
the PDF, ePub and MOBI versions, as well as the option to upgrade to the
screencasts.
Ill be releasing the book and screencasts on a chapter by chapter basis. The
rst three chapters will be released all at once, and then Ill be releasing one
chapter at a time until the book is completed.
If you decide to purchase the ebook or screencast packages before the book
is completely nished, you will be sent the updated content as it is completed.
If you remember my rst book, youll know I did a pre-order model. Ill be
doing something similar this time around.

1
2 CHAPTER 1. INTRODUCTION

The HTML version is free and will always be free, and Ill be releasing the
downloadable ebook and screencasts starting off at a very discounted rate, and
then increasing with every chapter release.
So when I release the initial three chapters, the ebook package will be $16
and the screencast package will be $44. These prices will increase incremen-
tally with each chapter release, eventually settling on $39 for the ebook package
and $99 for the screencast package when the book is completed.
The book will be nished rst, followed by the screencasts. Im hoping to
hit a schedule of one or two chapters per week until the book is nished.
No matter what time you purchase the package, youll be sent each chapter
as it is nished.
So if you purchase the screencast package when the rst three chapters are
released, youll be sent each new chapter and screencast as they are released.
So if youre looking to save some money and still get the videos and ebook,
this is a great way to do that.

1.2 Prerequisites
This book is about at an intermediate level. You should be familiar with both
Meteor and React, but dont need to be an expert in either of these. Go through
the Meteor Tutorial and check out the React documentation to get an introduc-
tion to the two technologies well be using.
You should be familair with web development in general, otherwise you
may have some trouble getting through this book. Overall though, Ive tried to
write it in a way that is accessible to most users, while still being useful.

1.3 What we are learning

This book will cover the process of building a complete app from start to nish
using Meteor and React.
The app well be building is called Beer Buddies. Its a simple social app
that allows people to record different types of beer they try and share that in-
1.3. WHAT WE ARE LEARNING 3

formation with friends. Well be covering all of the concepts necesary to un-
derstand how to build applications with Meteor and React, from initial project
setup all the way to deployment.
Each chapter will introduce a new component to the application, and will
include working example code so you can compare your work and see where
your bugs are.
Something that Im really improving on in this version is that every chap-
ters sample code will be a working version of the application. One of the
weak points in my last book was the sub-par example code, so Im working
really hard to make sure the example code is exactly in line with the book.
One part of that will be that in each chapter we will be adding a complete
component, so that you will have a working, bug free application at the end of
each chapter. Having half-nished sections caused some confusion in the last
book, so Im hoping to rectify that in this latest version.
Heres a basic outline of the content. Certain things may change as I get
further into the book, but this will be the basic format.

1. Introduction

(a) Introduction to the tools we are using

(b) Description of the app we are making

2. Initial project planning

(a) Sketching out the wireframes

(b) Planning out the data structure

3. Project set up

(a) Setting up our frameworks

(b) Creating our data structure
(c) Front end framework setup

4. User accounts setup

4 CHAPTER 1. INTRODUCTION

(a) Set up user accounts system including login, registration, and basic
user prole
(b) Create a basic display

5. Inserting beer data

(a) Add beer page

6. Displaying beer data

(a) Set up display for individual beers

7. Dashboard page

(a) Page to display a summary of the users activity

8. Beer buddy system

(a) Add a beer buddy system to connect with other users

9. Deployment

(a) Deploying our site to Meteor Galaxy

(b) Deploying our Meteor site to ZEIT for free

There will be exercises at the end of each chapter to help you solidify the
knowledge youll learn by working through the book. Sometimes these will be
questions you should answer and sometimes they will be additions or modi-
cations to the application.
I will not be providing the solutions to these exercises.
The exercises are meant to be a supplemental part of the book designed
to help you cement the knowledge in your head. I want you to be able to
solve these challenges on your own. Youll never learn more in programming
1.4. WHAT WE WONT BE COVERING 5

than you will when you push through and solve a problem and get something
working.
If you are really, really stuck on one of the exercises, email me and Ill do
my best to help you out.

1.4 What we wont be covering

As much as I would like to, I simply cant cover everything that everyone wants
to learn about Meteor. Meteor is a rapidly changing and developing framework,
and many aspects of the Meteor ecosystem are constantly in ux.
There are three main omissions to this book that people may be concerned
about. I want to address each and my reasons for not including them.

1.4.1 Apollo
This may be the biggest, as numerous people (including me, were very excited
about Apollo). However, I have decided not to include it in this book for a
few reasons. Originally, I was very excited about Apollo, and had planned on
including it in the book, but I ended up deciding against it.
First, I simply dont think it is best suited for Meteor applications. I think
Apollos best use case is in JavaScript applications that are built using different
frameworks. The beauty of Meteor is that it is meant to be an all-in-one solution
to building reactive web applications. Apollo takes away this inherent reactivity
and responsiveness, which in turn takes away a major component of Meteor
apps.
Yes it would be great to be able to use a schema like GraphQL, but for this
particular book, I felt the cons of using Apollo outweighed the pros.
For a more detailed version of how and why I came to these conclusions,
take a look at this post by Sacha Greif: Should You Make the Switch? Using
Apollo Inside Your Meteor App
6 CHAPTER 1. INTRODUCTION

1.4.2 Redux
Redux is awesome, but I feel it is unnecessary for Meteor applications. I played
around with Redux for the last version, and it was another aspect that I had
planned on including in this version. But the more I used it, the more I felt it
added unnecessary complexity to Meteor applications.
The goal of this book is to build great Meteor applications, and when you
start adding different JavaScript frameworks simply because they do something
cool, it starts to turn a Meteor app into a Frankenstein monster of sorts. Meteor
is meant to be all-in-one and easy to use, and Redux was another component
that I felt took away from that.

1.4.3 Mantra
I struggled with this decision for quite a while before utlimately deciding against
using Mantra in this version. There are two main reasons for this.
First, I thought it was better to stick with the method that MDG has laid out
in their guide, which contradicst the way Mantra is set up in quite a few ways.
I think they are both great ways to structure an application, but using the MDG
guide seemed a better solution in regards to a sustainable book that will still be
useful in the future.
Second, the Mantra ecosystem seems a bit fuzzy right now, and I simply
dont know where its going or how much longer it will be actively maintained,
developed on, and documented.

1.5 Some final notes

I really think this book is going to be a fantastic introduction to developing
applications with Meteor and React, and before we get started, I just wanted to
let you know of a couple of things.
If you notice any typos or bugs, I would greatly appreciate a heads up.
Writing a programming book is a very involved process, and its easy to let
small things slip, but I want to make this a very high-quality, go-to resource for
1.5. SOME FINAL NOTES 7

learning Meteor. User feedback is critical in the process, and anything you can
do to help would be great. If you scroll up to the top of the page, you can hit
the Contact Author button at any time to send me an email.
When it comes to support, Ill do my best to help anyone out who is strug-
gling, but I cant always provide one on one help to everyone who needs it. I
will do my best to at least respond to every email, even if I cant solve your
problem.
The main goal of the example code is to make it so that if you are stuck on
a bug you cant x, you can compare your code to the example code and get
past it.
With all that said, lets get going building our application!
8 CHAPTER 1. INTRODUCTION
Chapter 2

Project Planning
Alright lets get building our application. Were going to start by thinking about
exactly what our application needs to do and what it will look like.
There are a few basic components that our application will have. In this
chapter well go over all of those so that we have a basic idea of how our
application will be laid out.
When developing with a framework like Meteor, it is extremely important
to plan everything out and get a picture in your head of how it will be structured.
Because Meteor is so exible, you can nd yourself in the weeds pretty quick
if you dont have a solid gameplan.
In this chapter well be making that gameplan. Well start out with the
layout structure, and then move into planning out our data structure. There
wont be any code in this chapter, just some planning and note taking. Feel free
to sketch some of this out as well if that helps you visualize it.
This might be boring for a lot of people, but proper planning is critical for
creating a maintainable, functional application. I really want to stress the im-
portance of planning everything out when developing with a exible framework
like Meteor.
Things will most likely change as the application grows, which is ne and
expected, but its important to lay the groundwork.

9
10 CHAPTER 2. PROJECT PLANNING

2.1 Planning Out Our Application

Lets talk about what exactly Beer Buddies will do and what it will look like.
Beer Buddies main function is to allow users to track different kinds of beer
they have tried and share those with other users of the app. Well be building
out each piece of this app step by step in the coming chapters.

2.1.1 User system

Our user system will be realtively basic, and will include the following:

Login page

Registration page

Prole setup

Well use Meteora accounts-password package to get the base of this com-
ponent going, but well be rolling out our own UI for it.

2.1.2 The Dashboard

The dashboard will be the main interface that users will be interacting with. It
will allow them to view recent beers that they have tried, which friends have
also tried those beers, and suggestions for other beers to try based on what their
friends are drinking.
The main goal of the dashboard is to provide a quick look at the users
activity within the app.
Well have a basic side navigation with links to the other parts of our app.
And users will have a quick add feature to add a beer easily in this part of the
app.
2.1. PLANNING OUT OUR APPLICATION 11

2.1.3 Add Beer Module

Another main component of the application will be the ability to add beers.
This will be done by having a navigation item that leads the user to a form,
where they can add their beer.
This form will be a little more in depth than the quick add feature on the
dashboard.
This form will have the following information:

Beer name

Beer type

Brewery that makes the beer

Description of beer

Recommendation

Picture of beer

2.1.4 Buddies
This is the social aspect of the application. The buddies module will contain
all of the users current buddies and their beer information, as well as have a
search function to nd other buddies based on their email address.
From this module, users can send a buddy request to someone they nd via
search.
Well also be able to look at all of our buddies beers, and add them to a list
of beers that we want to try in the future.
These are the main aspects of our application that we will need to visualize
and wireframe out.
 12 CHAPTER 2. PROJECT PLANNING

2.2 Data Structure

Now that we have the big parts of our app wireframed, lets get to work plan-
ning out how well handle the data.
Even though it isnt a requirement of Meteor, I highly recommend creating
a structured data schema for our app ahead of time. Mongo is uid, which
means we can technically add in whatever data we want at any time, but this
can get dangerous quickly.
For Beer Buddies, well be using the Collection2 package to handle this
aspect of our application, which well install in the next chapter.
For now, well just write up a quick pseudo-structure for our data. Keep in
mind this data may change as we further develop and rene our application.
This is normal and expected when developing a web app, and as long as
you keep track of your changes in the schema well be creating, it shouldnt
cause any problems.

Box 2.1. More information on Collections

If you need a refresher on how collections work in Meteor, be sure to check out
the Meteor guide on the subject.

2.2.1 Our Collections

For this project, well really only be working with two collections:
Users
Beers

Users
Our users collection will mainly be handled by the accounts-password package,
but well take advantage of the prole feature and have the following data in