Log In

Blog

Hosting Your App’s Static Content on GitHub

posted June 11, 2015, by Klaus

Simpl.js is designed for single-document javascript applications and modules. While this is all you need to create rich applications of any size using modern web APIs, you’ll likely be looking for a cleaner way to incorporate static content into your apps. Whether you link to css, js, images, and other static assets, or proxy them through your Simpl.js application, they will need to live on some file server in the cloud.

For most applications, GitHub is a great place to host static assets. Here are some of the benefits:

Setting all of this up is relatively straightforward. Here is one possible configuration:

BrowserGET /Simpl.js ServerGitHub
GET /styles.cssGET /styles.css

This configuration proxies static content rather than linking directly to it on GitHub. Proxying allows full control over the URL and headers delivered with the content, which is necessary to override GitHub’s cache-control and content-type headers, and because certain files may need to be served from the same domain. To proxy static content requests, use something like the following code inside your request callback:

if (/^\/(css\/|js\/|img\/|favicon.ico$)/.test(request.path)) {
  return modules.xhr(config.staticRoot+request.path, {responseType: 'arraybuffer'}, function(e) {
    if (e.target.status != 200)
      return response.generic(404);
    response.end(e.target.response, (request.path.match(/.([^.]*)$/) || [])[1]);
  });
}

In development, staticRoot (e.g., http://localhost/repo) would point to working content from a local HTTP server (e.g. nginx). Make sure to configure your file server to add a Cache-Control: no-cache header, since Chromium aggressively caches certain files without it. When it’s time to deploy, simply push your static files to GitHub and set staticRoot to the new commit URL path (e.g., https://raw.githubusercontent.com/me/repo/fc973b2) before restarting your app in Simpl.js.

As of this writing, GitHub caches versioned files for 5 minutes:

Cache-Control: max-age=300

If you want a far-future expires header, you can specify it in the call to response.end above. You can also configure a reverse proxy to enforce the cache between your users and your Simpl.js server, particularly if you’re planning for high traffic.