Review apps with AWS CloudFront for HTML+JS projects
Improve your team’s reviews by automatically deploying each branch to its dedicated environment.
--
Review applications can make a team’s reviews quicker and more efficient by leveraging the repetitive tasks required to manually spin up a dynamic environment for a pull request. They can also be used to showcase product changes to designers without manual deployments to a sandbox environment.
In our experience, if developers are not forced to stash their work and checkout another branch every time a review is required, they are more focused in reviewing changes, and this has helped improve the overall quality of our work. By providing designers a live, always up-to-date preview environment, we also strengthened the cooperation between them and our devs, and accidental style changes are now fixed sooner than they used to be.
This article focuses on a simple, yet perhaps common scenario: an HTML+JavaScript application that uses an external API to run. As such, sources can be uploaded on AWS S3 and served through CloudFront. Throughout all the following examples, review.man.wtf will be used as the base domain so that a working demo could be provided.
The big picture
The idea is to use a single CloudFront distribution that serves *.review.man.wtf, and a single S3 bucket named review.man.wtf that stores application files prefixed by the variable part of the domain. So, for example, the URL https://test.review.man.wtf/image.gif will serve the file stored in S3 as s3://review.man.wtf/test/image.gif. When a new branch feature/foo is pushed in the VCS, the branch name is made URL-friendly, and the review app is deployed at https://feature-foo.review.man.wtf/.
At the time of this writing, CloudFront configuration alone is not flexible enough to make this work seamlessly. However, developers are allowed to attach Lambda functions to their CloudFront distributions (known as Lambda@Edge), that are capable of manipulating requests and responses to and from the client, and to and from the upstream source — in this case the S3 bucket.
