Automated Front End Content Preview

TL;DR

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

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:

  1. Builds the React application.
  2. Sanitizes the branch name into an IETF RFC 1123 compatible subdomain (e.g., feature/my-branch becomes feature-my-branch).

  3. Uploads the built assets to the S3 bucket with a content-preview/<branch-name>/ prefix (e.g, s3://bucket-name/content-preview/feature-my-branch).

    diagram describing the steps outlined above
  4. 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.
a bot user posting the URL to view the content preview to the GitHub pull request comment feed

Then, when the user visits the preview URL (e.g., https://feature-my-branch.client.com):

  1. The request is sent to a CloudFront distribution for processing.
  2. 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.
diagram describing the request steps outlined 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.

Freelance Services

Are you interested in being able to preview front-end application changes during your development process? I’d love to help! Learn more about my freelance services and reach out.