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.
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.