Bucket of Angular in the Cloud

At work, we’re currently in the process of separating our front-end from our back-end. The back-end is all .NET and were using MVC and ASP to render the html/css/javascript, but this quickly became unmaintainable since there was no dedicated front-end resource or an established architecture.

I made the proposition to move towards a single page application using Angular as a framework and Bootstrap for responsive design. In collaboration with the UX designer, we created a very quick mockup of certain parts of the system to show how quickly we were able to create functional software.

We then set our eyes on the next step: replacing a functional part of the system using Angular, deploying it separatly than the rest and creating an API for the communication layer. I added a Grunt build system with testing to make our lives easier and catch issues in our code before it went out. Everything would be compiled and then deployed; since it was all static files, I’ve decided to throw it all in an S3 Bucket which I could then serve the files using the static website option. This was great for testing the API on cross domain calls and making sure our builds actually worked. However, our product is global and need to make sure that our Angular app can be reached anywhere and at a decent speed.

Enter CloudFront. We use CloudFront to deploy our app to all edge locations on the planet so that it loads fast, from the nearest location. The only issue however was how to control what version of the application was being seen by our clients. By default, using S3 behind CloudFront, it wouldn’t automatically update the content on CloudFront to edge locations without having a manual invalidation of data or waiting for the TTL to expire. To fix this issue, we made sure that all files being loaded were suffixed with the version number of the app (somefile.js?v=1.0.1) and then manually invalidated only the root domain and the main html (‘/’ and ‘/index.html’).

All of this was done using the AWS command line client in our build system (phabricator). In retrospec, other than the initial learning curve of CloudFront, everything was amazing to work with.

How often can you say you deployed a web app globally within 5 minutes of building/deploying/invalidating? The only thing I would critique is that the invalidation wasn’t done automatically when deploying to S3.