Build a multi-page application with Meteor.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Class: Build a Multi Page App with Iron Meteor


In this class we'll build a more sophisticated, multi-page application in Meteor. We'll use the iron scaffolding tool to create project structure and boilerplate code. In addition to understanding the concepts of a multi-page app, we'll build several features including multiple users, a comment system, and a customized Meteor Developer Accounts OAuth login.

What's in this class?

  • Introduction: Build a Multi Page App with Iron Meteor - Introducing the Build a Multi Page App with Iron Meteor class.

  • Creating the Project with Iron Scaffolding - The iron command line tool let's us quickly create a project structure and scaffolding. It can automatically create the files and code for collections, routes, controllers, templates and other project resources. It also lets us run Meteor projects with settings for different environments like development, staging and production. We'll be using the iron command line tool in the rest of the class to save time building the application.

  • The Master Layout - A layout will allow us to reuse a look and feel across multiple pages in our app. It's where we'll put things like the login buttons, navigation breadcrumbs, and general container divs. You'll also see how the iron:layout package used by iron:router allows to create multiple yield regions which we can render content into from child templates.

  • Routes and Controllers - In this introduction we'll tour the route and controller for the home page of the app. Routes allow us to map a url to a controller. Controllers are a way of organizing our application logic into classes.

  • Customizing Login with Meteor OAuth - Meteor has packages for multiple OAuth providers including Facebook, Github and several others. Meteor also provides their own OAuth service called Meteor Developer Accounts. In this video you'll integrate with Meteor Developer Accounts and customize the UI. You'll also see how to store API configuration settings for development and production environments as environment variables.

  • Collections and Subscriptions - The iron tool will generate a secure collection for us using Meteor's allow/deny functions. You'll see how to customize the security rules. Then you'll write the publish and subscribe functions and use the WebSockets console to confirm the correct messages are being sent over the wire.

  • Generating Templates - Use the iron tool to generate scaffolding for the main templates. You'll see a workflow for creating several templates quickly, and wiring them up to work together. By the end of this video the home page will be complete.

  • Routing with Parameters - In this lesson you'll create a route for looking at specific todos. The route will have a dynamic parameter for the todo id. Then you'll subscribe to data using the id parameter and set a global data context for the page's template. You'll also see a technique for debugging problems.

  • Using Reactive State - Sometimes you want to reuse the same template in different routes. For example, you might have a route for showing a template and another route for editing the todo. You can use reactive state to decide whether to render the show view or edit view.

  • Adding Multiple Users - In this lesson you'll add a feature to see other users' todos. Now that you're familiar with the scaffolding concepts, we'll rapidly move through the workflow of building this feature, including the route, templates, breadcrumb content, and publish functions.

  • Adding Comments - Now that we can see other users' todos we'll add a comments feature so users can comment on todos. You'll see how to publish multiple cursors from one publish function, join data in a template, and use the momentjs package for formatting the timestamp.

  • Securing the Publish Functions - It's a good idea to secure your publish functions independently of the views. Otherwise, anyone can open up a JavaScript console and subscribe to a publish function that's intended to be private. In this lesson we'll ensure that a user is logged in before publishing any data. We'll also take care to implement this feature in a way that's compatible with the spiderable server-side rendering package.