Follow me if you want to grow your full-stack JavaScript skills with my screencasts and courses.

Express-cdn

Resources

Express-cdn on github: https://github.com/niftylettuce/express-cdn

MaxCDN: http://www.maxcdn.com/

Amazon web services: http://aws.amazon.com/

Intro

I was in this position recently and was pleasantly surprised by how easy it was to do with an amazing little module called express-cdn. This tutorial will take you through changing an existing site to use the express-cdn module and configure your files to be served from MaxCDN.

Installation

Our site is downloading a couple of stylesheets and script files directly from our web servers. Let's fix that by installing the express-cdn package:

terminal
  
  $ npm install express-cdn --save
  

Configuration

After our package installed, we quickly configure it in our main express file, in our case index.js

index.js
  

  ...

  var sslEnabled = false

  var options = {
        publicDir  : path.join(_dirname, 'public')
      , viewsDir   : path.join(_dirname, 'views')
      , domain     : 's3.amazonaws.com/tagtree-express'
      , bucket     : 'tagtree-express'
      , key        : 'AKIAIXUB3O7LAAGDZBFA'
      , secret     : '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'
      , hostname   : 'localhost'
      , port       : (sslEnabled ? 443 : 1337)
      , ssl        : sslEnabled
      , production : true
  };

  var CDN = require('express-cdn')(app, options);

  app.locals.CDN =  CDN();


  ...

  

Let's go over the settings one by one

The following line tells express-cdn where to find the assets:

index.js
  
  publicDir  : path.join(_dirname, 'public')
  

It needs to know where to find the views it should 'walk' to strip out all the assets on startup:

index.js
  
  , viewsDir   : path.join(_dirname, 'views')
  

It needs a domain it will use to point to the files, it's fine to start with the S3 bucket:

index.js
  
  , domain     : 's3.amazonaws.com/tagtree-express'
  

The bucket contains the S3 bucket that will be used to upload the assets to, in my case tagtree-express:

index.js
  
  , bucket     : 'tagtree-express'
  

It needs the credentials to an account that can upload new files to the S3 bucket. The following are credentials that were active at a point, but which I deleted afterwards:

index.js
  
  , key        : 'AKIAIXUB3O7LAAGDZBFA'
  , secret     : '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'
  

We construct the module and set the view helper on the app.locals variable to make it available to views:

index.js
  
  var cdnAssets = require('express-cdn')(app, options);
  app.locals.cdnAssets =  cdnAssets();
  

Updating the view file

Now that the module is configured and the view helper available, we need to update our view to use it.

Have a look at these references in the view file:

index.ejs
  
    <link rel="stylesheet" type="text/css" href="/stylesheets/grid.css">
    <link rel="stylesheet" type="text/css" href="/stylesheets/main.css">
    <link rel="stylesheet" type="text/css" href="/stylesheets/icons.css">

    <script type="text/javascript" src="/scripts/lib/page.js/index.js"></script>
    <script type="text/javascript" src="/scripts/lib/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="/scripts/routes.js"></script>
  

We change that to be referenced through the CDN view helper, so that it can do all sorts of magic on it. The CDN helper takes an array with the paths to the assets you want to reference. It will combine it, minify it and upload it to the configured S3 bucket:

index.ejs
  
    <%- cdnAssets([
            '/stylesheets/grid.css',
            '/stylesheets/main.css',
            '/stylesheets/icons.css'
        ])%>

    <%- cdnAssets([
            '/scripts/lib/page.js/index.js',
            '/scripts/lib/jquery/dist/jquery.js',
            '/scripts/routes.js'
    ])%>

  

When we refresh the website, we see that it now downloads the combined CSS and script files from our S3 bucket!

Most CDNs allow you to configure a distribution by pointing it to a S3 bucket. If you've done that, you just need to update the config to let express-CDN know so that it renders the references correctly:

index.js
  
    , domain     : 'd1mftb001dbt91.cloudfront.net'
  

Wrap up

Well! I thought this tutorial would be longer, but it turns out it was so easy to do! I looked at various other asset pipeline modules, but fell in love with the elegance and simplicity of express-CDN.