Meteor CDN Integration

meteor cdn

What is Meteor?

Meteor is an open-source, full-stack JavaScript platform used for building reactive apps for iOS, Android, and the web. With over a half a million unique installs, Meteor apps are growing in popularity thanks to the platform’s features such as:

  • Reactive programming model that requires much less code
  • Flexible and able to integrate with thousands of libraries
  • Able to update all connected browsers and devices with hot deploys
  • Universal JavaScript allows for the same code to run for various purposes

How To Perform a Meteor CDN Integration

There are a couple of ways to perform a Meteor CDN integration. Use one of the following methods to configure your a CDN to deliver your Meteor app’s static assets.

Integration Method #1

The first method for performing a Meteor CDN integration involves using the Meteor-CDN package. This package changes the domain of your static assets by setting the environment variable CDN_URL. To use the Meteor-CDN package follow these steps:

  1. Create a Pull Zone before starting the integration
  2. Add the package to your Meteor App
    meteor add nitrolabs:cdn
  3. Run Meteor with the following command
    export CDN_URL="cdn.yourdomain.com" && meteor

Insert your CDN_URL in the format of cdn.yourdomain.com if you are using a Zonealias. Otherwise, use the zone url provided within the KeyCDN dashboard.

This package also comes with a template helper. This can be use in the following way to set your CDN_URL variable into your templates

<template name="DemoLayout">
<img src="{{CDN_URL}}/path/to/your/image.jpg"></img>
</template>

Integration Method #2

Similar to method #1, first create a Pull Zone before continuing with the Meteor CDN integration. This method involves setting the WebAppInternals.setBundledJsCssPrefix() with your CDN URL which will be prepended to your static assets such as CSS, JS, images, etc. The setBundleJsCssPrefix must be called on the server upon startup.

A server/cdn.js file should be created and contain the following snippet.

Meteor.startup(function(){  
  WebAppInternals.setBundledJsCssPrefix(Meteor.settings.cdnDomain);
});

Using a  Meteor.settings call allows you to configure the cdnDomain option for each hosting environment.

Benefits of Using a CDN With Meteor

Using a Meteor CDN combination will help to improve the overall global delivery of your Meteor app’s static assets. There are many benefits to offloading assets to a CDN such as less strain on the origin server, faster delivery to users in different geographic areas, increased security, etc. For example, a few benefits that KeyCDN provides access to include: