A Lambda@Edge Function for Angular App URI ReWriting.
As the world moves back to a more client-side driven way of delivering experiences, so how we can start to address these experiences changes. It hasn’t gone un-noticed that I’m a massive fan of keeping things simple - using the right tools for the job, rather than disappearing into an over-engineered world, only to tick a box to say, “Yup, done that!”.
Amazon Web Services provides an excellent platform for choosing the right components for whatever experience you are trying to deliver - in my case, on my Development & Architecture Blog, I use Amazon CloudFront to distribute content, at the edge, from within an Amazon S3 Bucket Origin - this means that wherever in the world you are, the experience will be delivered locally, due to hundreds of CloudFront “edge” locations.
As you switch from the traditional server-side processing model, into a serverless paradigm (CloudFront and S3), there are a few capabilities that you took for granted that need to be re-architected - one of which is the uniform resource indicator (URI) re-writing that is required in order to support routing within a single page application (SPA). The way that a SPA works is that regardless of the requested URI, there is a single file that is always called to decide, in the client-side script, which resource(s) should be displayed.
As an S3 Bucket has no processing capability, we have to re-think the approach slightly. Enter Amazon Lambda, providing the ability to run code, without provisioning servers to do it. Elastically scalable and highly-available, with integration to CloudFront, it provides me with everything that I need to intercept and respond to a request in the right way.
The reason that I configured EdgeAngular is that I needed to deploy an Angular application within my AWS serverless infrastructure. I need CloudFront to send each request (unless a fully-qualified file extension is provided), via my Lambda Function, to the /index.html file, which is likely cached at the edge.
EdgeAngular is designed for execution upon “Origin Request”, which means, if a CloudFront edge node does not have a locally cached version of the content, it will fetch the content and then allow the edge node to cache it for the next user.
EdgeAngular is available under the MIT License at https://github.com/ptylr/Lambda-at-Edge/tree/master/EdgeAngular/. If this is going to be useful to you, help yourself!