Automated Front End Content Preview
Reduce cycle time by automatically deploying "preview" single-page applications for every front-end pull request.
Some of the most productive front-end engineering teams utilize a
Continuous Deployment (CD) process to automatically deploy code
changes once approved and merged to their
In many cases, in addition to reviewing the source code of the change, reviewers find it helpful to validate the functionality of a changeset in a web browser. In early 2020, I implemented “Content Preview” solution that makes it easy to preview changes in a web browser directly from a GitHub Pull Request.
Content Preview Architecture
Since the client wanted to preview a single-page application created using React, I used AWS S3 + CloudFront to serve the static content. You can learn more about serving a static website using S3 + CloudFront in the AWS Knowledge Center.
When an engineer opens a Pull Request, a GitHub Action:
- Builds the React application.
- Sanitizes the branch name into an IETF RFC 1123 compatible
Uploads the built assets to the S3 bucket with a
- A bot user posts back to the PR with a URL to view the preview. You can learn more about how this bot user works on my blog.
Then, when the user visits the preview URL (e.g.,
- The request is sent to a CloudFront distribution for processing.
- An Origin Request Lambda@Edge function handles all
requests to content preview subdomains and serves the static assets from the
content-preview/<branch-name>/path in S3. The requester is served the assets produced and uploaded by the GitHub action described above.
This simple, cost-effective solution significantly improved developers confidence to review and approve changes. Easily previewing changes empowers developers, QA, and design to quickly review and iterate.