Express CDN Integration

Updated on December 20, 2021

Express is a popular web framework for Node.js. Express is lightweight, versatile and offers a solid set of functionality for all kinds of web apps. Express is based on a lean layer of essential web application features. express-simple-cdn is a Node.js module for Express that makes an Express CDN integration for static assets really easy. This tutorial explains how to use the express-simple-cdn module with KeyCDN.

CDN integration with Express and EJS without NPM package

This example describes how to integrate the CDN into a Node.JS app with Express and EJS as templating engine. There are two possible approaches without using an NPM plugin.

Option 1 - Return the full tag by a function

Write a function in your app.js or wherever you handle your functions. First, define a variable with your CDN URL. Second, register that variable in a function with several attributes which returns the full tag of the requested asset. The advantage of this approach is, that you can use a defined tag structure for every asset.

// Initialize Express in a variable in app.js
var app = express();

// Define Your CDN base path
var CDN = "https://assets.preisheld.ch";

// Register a local variable in your app which contains the CDN function
app.locals.CDN = function(path, type, classes, alt) {
    if(type == 'js') {
        return "<script src='"+CDN+path+"' type='text/javascript'></script>";
    } else if (type == 'css') {
        return "<link rel='stylesheet' type='text/css' href='"+CDN+path+"'/>";
    } else if (type == 'img') {
        return "<img class='"+classes+"' src='"+CDN+path+"' alt='"+alt+"' />";
    } else {
        return "";
    }
};

Do not forget to export the module, in order to have access to the function: module.exports = app;

In your template, e.g. index.ejs, call your function where you need your assets:

// CSS
<%- CDN('/stylesheets/main.min.css', 'css', '', ''); %>

// image
<%- CDN('/images/dummy-image.png', 'img', 'img-responsive', 'my picture'); %>

// JavaScript
<%- CDN('/javascript/load.js', 'js', '', ''); %>

Option 2 - Use a global variable

You can simply place a variable in your ejs template without any function. In this case, you need to pay a bit more attention, that your tags look always the same. If you are using a default class for all your images, approach 1 should be preferred.

Define the variable which contains your CDN path:

app.locals.CDN = "https://assets.yourwebsite.ch";
module.exports = app;

In your html/ejs template, place the variable before you relative path in the src attribute. As you put out a variable directly, use <%= %> instead of <%- %>
```
<img class="img-responsive" src="<%= CDN %>/images/dummy-image.png" alt="my picture" />
```

Benefits of an Express CDN integration

A CDN can help increase the delivery speed of your Express assets by caching them across multiple strategically placed edge servers. Website latency is in many cases decreased significantly for websites using a CDN compared to websites not using a CDN. There also exists many other benefits to implementing an Express CDN integration with KeyCDN such as:

Let's Encrypt support which provides free custom SSL certificates
HTTP/2 enabled edge servers for even faster content delivery
Low pricing which decreases upon volume usage
Origin Shield support to help further reduce your origin server's load

Support

Express CDN Integration

CDN integration with Express and EJS without NPM package

Option 1 - Return the full tag by a function

Option 2 - Use a global variable

Benefits of an Express CDN integration

Supercharge your content delivery 🚀