How to Add Permalinks to a Meteor Project

There’s no reasons for modern web applications to not have permalinks (also known as “pretty URLs”). They’re easier for users to remember, important for SEO, and when working with Meteor, extremely easy to implement.

To demonstrate how to create a basic permalinks system, we’re going to build a barebone blogging application. By default, each post will have a URL that contains the ID of the post like the following: http://localhost:3000/post/pCZLhbwqtGXPdTDMM.

This is the simplest approach, but the resulting URL isn’t very nice, so we’ll then learn how to replace that ID with a custom value. Our change will enable us to have a URL like this: http://localhost:3000/post/hello-world.

Along the way, we’ll also learn a couple of other tricks that’ll come in handy when building any kind of web application with Meteor. In case you want to play with the code created in this article I’ve created a repository for you.

Let’s start!

Getting Started

Inside a new Meteor project, install Iron Router by running the command:

meteor add iron:router

For the uninitiated, Iron Router is the preferred routing package among Meteor developers, and it allows us to associate templates with URL paths.

You could also create a permalink based on the title of the post — so if the post title was “Hello World”, the permalink would be “hello-world” — but this is a little beyond the scope of this tutorial.

Post Pages

Every blog post needs its own, individual page. For starters though, these pages will rely on the ID of the post, rather than the permalink value (even though these are currently the same values, as we just covered).

With this change in place, the URL for the same post page would become http://localhost:3000/pCZLhbwqtGXPdTDMM.

Editing the “Permalink” Field

We’re close to adding permalink support to the application but, first, let’s write the code to edit the “permalink” field. To do that, we need to update the “post” template by adding the “permalink” field. We’ll also add a contentEditable attribute to the surrounding div element. Using this attribute, we’ll be able to directly edit the permalink field from within the page, although we’ll need to build the logic for this to work. The resulting code of the template is shown below:

To create the business logic mentioned early, create an event that allows users to edit the value of the “permalink” element and press the “Return” key to save that value to the database. The code to create such event is shown below:

Here, we’re using this Router.go function to redirect to the “post” route using the edited value of the permalink field.

Conclusions

Setting up the basics of a permalink system is simple enough. The tricky part is all the extra details that need to be considered. Here are a few questions to think about:

What happens if the user tries to define a permalink that’s already been defined for a separate page?

What kind of limits should be enforced when defining a permalink? (Length, types of characters allowed, etc.)

How can you auto-create a permalink based on the title of the blog post, instead of using the ID of a post in the permalink by default?

These problems are a good exercise to test your knowledge. So you might like to tackle them in your own time. In case you want to play with the code created in this article I’ve created a repository for you.

David Turnbull is the author of the Meteor Tips blog, a regular source of tips, tricks, and tutorials for the Meteor JavaScript framework. He's currently hard at work on a screencast series for beginning developers to get started with Meteor.