Express server for an Angular application part 7: add cache

Marco Zuccaroli

Express.js is a web application framework for Node.js designed for building web applications, in this series of articles I will explain step by step how i realized an express server with some advanced functions that i use for my single page application made with Angular 7.

I will discuss the 7 main problem that i solved in different articles:

  1. getting started
  2. serve files from a bucket
  3. redirect some calls to an external service
  4. redirect http to https requests
  5. redirect non-www to www requests
  6. limit connections and prevent DDoS
  7. handle some cache

In this article I will discuss how to add a cache layer to express server.

A working example of this project is available at:

https://github.com/mzuccaroli/express_server_for_angular_example the master branch contain the final full project but there’s a dedicated branch for every single article, for this one the reference https://github.com/mzuccaroli/express_server_for_angular_example/tree/develop

For this feature like the ones developed before I chose to introduce different behaviors for develop and production, like in the previous part of this tutorial “how to redirect http request to https” I use an “_environment” variable to separate local development behaviors from production ones. For more info see the article

An Angular application is by definition a static set of files, also, some of them like fonts images and the main js, could be big, so the main work of your express server will be continuously fetch this limited set of files by the bucket and provide them to users.
This is the ideal situation to add a small cache layer that will increase a lot your server performances.

The main idea is to perform a memory cache for the request fetched by the bucket, these files are limited in number and static so we don’t need to worry about massive memory usage. A tool to perform it in nodejs without adding complex layers is node cache, that will cache your response objects in a key-value storage.

first of all install node cache

npm install memory-cache — save

then import it in your server:

now you can add the cache-handling functions:

as you can see these two function basically put and retrieve objects in memory cache, the getCache function is written according to the express call chain so you can invoke it every time you handle a request like this:

Notice the “cache.getcache()” function is an argument of the app.all() function and the cache.handleResponse() is explicitly called in the second function, so if the the required object is in cache is directly provided by the getCache function, else, if there is ono cached object the handleResponse function will retrieve it from the bucket, put in the memory cache and provide it to the main function.

You can add the cache methods in all your handlers and increase drastically the server performace. You can see the full workoing example here: https://github.com/mzuccaroli/express_server_for_angular_example

This article and the reference examples are inspired by a real project that runs in production, so during the stress-test phase i noticed an issue with font files: in some cases cached font files are corrupted, i didn’t manage to undestand the real cause of this problem, so I excluded them from caching, with this small modification to the handleresponse() function:

It’s not perfect but work very well, as you can see this isn’t an “hello world” demo but real code that run in production, If in future I will solve the font issue this article will be updated and if you find the solution please write me!