Meteor Routing tutorial using iron:router

Meteor Routing can be achieved using famous package available at atmospherejs ( Meteor package registry ) called iron-router. It provides both front-end and back-end routing facility.

In this tutorial I am going to cover :

  • Installing and configuring iron router.
  • Meteor front-end routing.
  • Meteor back-end routing.
  • Sample project.

DOWNLOAD

Prerequisites

Knowledge of Meteor basics is required. If you are new to Meteor then read this tutorial for basic information about Meteor.

Installing and configuring iron router

Create new Meteor project using following command.

meteor create appName

Meteor router tutorial - create app

After creating app, clean up the project directory cause meteor does create sample files for you.

Go to project directory and delete the files using following command.

 rm -rf *

Now let’s install the iron-router in our project. Run following command in your terminal.

meteor add iron:router

Meteor router tutorial - adding iron router

Now we can start writing code but before that create two folders in project directory. Namely client and server. We will add code in separate folders.

Meteor front-end routing

We can use iron-router to perform routing at our view. Meteor uses templates and helpers in front-end and to perform routing you need to define various templates which you want to display in each view.

By default, the declared routes are for the client. If you want a route to be server side, then you explicitly declare so by including where: ‘server’.

Create 3 blank files in client directory.

  • client.html
  • client.js
  • client.css

Consider following simple route.

Route : /

Show “Hello there !” message in heading 1. So we need to define one template in our HTML file and tell Router to show it when “/” route hits.

Here is sample template code.

client/client.html
<head>
    <meta charset="utf-8">
    <title>Meteor Router Tutorial</title>
</head>
<body>
</body>