Meteor CDN Integration

Updated on October 4, 2018

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.

Option 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:

Create a Pull Zone before starting the integration.
Add the package to your Meteor app.
```
meteor add nitrolabs:cdn
```
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 Zone Alias. Otherwise, use the Zone URL (e.g. example-hexid.kxcdn.com) 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>
```

Option 2

Similar to the first option, 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:

Access to our global network of POPs
HTTP/2 supported edge servers
Let's Encrypt integration for free custom SSL certificates