Serve static content from a CDN like CloudFlare or CloudFront. This package changes the domain of the bundled css and js files to the environment variable CDN_URL. If the CDN_URL environment variable is not present, the default behaviour will be unchanged.
meteor add nitrolabs:cdn
Setup CloudFront or CloudFlare to proxy requests to your Meteor server. Then run Meteor with:
export CDN_URL="http://mydomain.cloudfront.com" && meteor
CDN automatically sets WebAppInternals.setBundledJsCssPrefix to match CDN_URL so the main Meteor css and js files are loaded from your CDN.
CDN also provides a template helper to get the CDN_URL in your templates. The CDN_URL helper can not be used in the head block, because Meteor does evaluate helpers in the head block.
<template name="MasterLayout">
<img src="{{CDN_URL}}/images/profile.jpg"></img>
</template>
CDN exposes function which can be used to get current CDN address.
CDN.get_cdn_url()
By default all files in Meteor public folder have cache-content: public, max-age: 0
header set, which directs the browser / CDN to cache the files for 0 seconds and means that the files are always served from the original server and never cached. By setting CDN.config.headers
you have the ability to set custom headers for files / folders in the public folder to make files in public folder being cached. Path used in CDN.config.header
can be full path to file or folder which under the files are in.
Below is an example on setting up caching for public folder. Add the configuration to your server, preferably inside your Meteor.startup
function:
// Best to only setup caching on production so things do not get cached on development
if (Meteor.isProduction) {
CDN.config({
headers: {
// Files in this example folder change very infrequently
"/someicons/": { "cache-control": "public, max-age: 10000" },
// We can set smaller caching times for individual files
"/someicons/changingIcon.png": { "cache-control": "public, max-age: 100" },
// This folder contains subfolders and files under them
"/staticassets/": { "cache-control": "public, max-age: 5000" },
};
});
}
To verify that the headers we're being set correctly for your assets, you can:
- Open Chrome Developer Tools
- Open Network tab
- Make sure the topleft recording balloon is set to record
- Refresh page
- Select assets you set the headers for and verify that the Response Headers section shows correct headers (remember to remove the production check if trying to check the headers on development environment).
Google Chrome and several other mainstream browsers prevent webfonts being loaded from via CORS, unless the Strict-Transport-Security header is set correctly. This package automatically adds the correct CORS and STS headers to webfont files to prevent this issue. When setting up Cloudfront or CloudFlare you should whitelist the Host and Strict-Transport-Security header.
Meteor currently uses the 200 response code for every request, regardless of whether the route or static resource exists. This can cause the CDN to cache error messages for static resources. nitrolabs:cdn
fixes this problem by:
- Only allowing static resources to be served at the CDN_URL
- Returning a proper 404 for any missing static resources
nitrolabs:cdn is compatible with most production setups.
When serving your app with mup the ROOT_URL and CDN_URL environment variables can be set from mup.json. See the meteor-cdn demo on Github for more details.
// mup.json
{
// Normal mup settings
// ...
// Configure environment
"env": {
"PORT" : 80,
"CDN_URL" : "http://d3k17ze63872d4.cloudfront.net",
"ROOT_URL" : "http://www.mysite.com"
}
}
CDN works perfectly with MDG Galaxy. Setup instructions:
- Add the
nitrolabs:cdn
package to your app - Point CloudFront at galaxy-ingress.meteor.com (see setting up CloudFront)
- Set the CDN_URL environment variable to xyz.cloundfront.com
The ROOT_URL and CDN_URL environment variables can be set from settings.json
// Settings.json
{
"galaxy.meteor.com": {
"env": {
"ROOT_URL": "https://www.mydomain.com",
"CDN_URL": "https://xyz.cloudfront.net",
"MONGO_URL": "...",
"MONGO_OPLOG_URL": "..."
}
}
}
- Point CloudFront at your Meteor server
- Whitelist the Host and Strict-Transport-Security headers
- Set querystring forwarding to "Yes"
We welcome contributions from the community. We aim to test and merge within 24 hours, especially for pull requests that fix existing bugs or add relevant functionality. Please make sure all tests pass before submitting a pull request:
meteor test-packages ./
MIT