Wire up a Meteor application with an external HTML page

4 min readSep 2, 2015

In this blog post we’ll take a closer look at how you can wire up your existing Meteor application with an external source (in this case a “static” HTML-Page).

The goal at the end of this writing is to have a good understanding on how you can use a DDP-Protocol-Implementation to connect a client with your existing Meteor application.

Let’s start!

The example application

Let’s use an example application to have a better understanding what we exactly want to accomplish.

We assume that we have a Meteor blogging application where users can publish their posts and interact with their readers. Every user has an own link to his blog where all the posts are shown.

We as the blogging application admins want to create a basic HTML page where the 20 most recent blog posts are shown. Instead of baking that into our available Meteor application we want to have this separated in a standalone raw website which just does this one task and nothing more.

The first thing which might come to mind is the implementation of a RESTful JSON API which is possible but in this case we use the already existing DDP-Connectivity to get all the recent posts from our application.

Adding an API to our Meteor application

Let’s dig a little bit deeper into how Meteors publish and subscribe patterns works.
Basically you have a server with a MongoDB database. The server exposes the data from the MongoDB database via a publication.

As a client you can subscribe to this publication to get the (realtime) data from the server.

The communication between the client and the server is done via the “Distributed Data Protocol” (DDP).
In most cases you program your Meteor application in a way that your client is “encapsulated into” your Meteor application (you write the client side code inside your Meteor application).

But you can also connect different other clients (like e.g. an iOS or Android device) to the server and consume the available publications.

You might have already noticed it.
You don’t need to program another API layer to your application. The only thing you need is a publication which exposes the data and a DDP-Library for your client so that you can communicate with the server. That’s it.

Let’s get back to our example application and look how we can implement our requirement of a most-recent-posts-Page:

1. Adding a new publication

The first thing we need to do is to add a publication to our Meteor blogging application which exposes the last 20 blog posts. This is pretty straightforward:

Meteor.publish('recentPosts', function() {<br />
  return Posts.find({<br />
    sort: {<br />
      createdAt: -1<br />
    },<br />
    limit: 20<br />
  });<br />
});<br />

That’s all we have to do in our Meteor application.

Let’s move on to the HTML website.

2. Add the DDP-Library

There are different DDP-Libraries for different languages available. We want to use a JavaScript-Based DDP-Library which we can embed easily into our HTML website.

In this case we choose Asteroid because it offers a really nice API which makes it easy to communicate with our Meteor application.

The first thing we need to do is to download the library.
Simply run

bower install asteroid<br />

That will create a new folder “bower_components” with the necessary JavaScript files in it.

After that we only need to copy this folder into our HTML website-Project and reference the scripts in our HTML-Site:

<script src="bower_components/ddp.js/src/ddp.js"></script><br />
<script src="bower_components/q/q.js"></script><br />
<script src="bower_components/asteroid/dist/asteroid.browser.js"></script><br />

That’s it for the installation. Let’s take a look at how we get data from our Meteor application.

3. Establish a connection to our Meteor application

The first thing we need to do is to establish a connection to our Meteor application.

// connect to our application<br />
var bloggingApp = new Asteroid("url-to-our-application.com");<br />

Note: It’s important to omit the protocol (http / https). Asteroid will automatically map this to a ws-Connection, so just add the domain without the protocol.

4. Subscribe to a publication

Let’s subscribe to our publication we’ve defined in our Meteor application.

Thanks to asteroid this is pretty simple.

// subscribe to the publication<br />
bloggingApp.subscribe('recentPosts');<br />

5. Get the recent posts

Now that we’ve subscribed to the recent posts we need to fetch them in a reactive manner. Asteroid got use covered here with some easy to use helper-Functions:

var postsCollection = bloggingApp.getCollection('posts');<br />
var recentPosts = postsCollection.reactiveQuery({});<br />

We use the reactiveQuery-Function which enables us a way to filter the data in the collection in a reactive way.

6. Displaying the posts

Now that we have all the posts available we want to display them on our page.
We store the result of our reactiveQuery in a new result-Variable, iterate over it and append them to our list with the id ‘#posts’ on our page where we want the posts to appear.

Vanilla jQuery is used for the data-Binding here.

The on-Event handler is fired every time the posts-Data changes. So there is no need for reloading here because the connection to our Meteor application via DDP ensures that always the new data is displayed (as we’re used to when developing a Meteor application).

recentPosts.on('change', function() {<br />
  var result;<br />
  $('#posts').empty();<br />
  result = recentPosts.result;<br />
  result.forEach(function(result) {<br />
    $('#posts').append('<li>' + result.title + '</li>');<br />
  });<br />
});<br />

Summary

That’s it. We’ve now successfully used DDP to connect our Meteor application with an external “static” HTML-Website.

There are several other DDP-Libraries available out there. And you should really check them out!

Another idea would be to connect the blogging application to an iOS / Android app. The usage of the library should be similar thanks to the standardized DDP-Protocol.