How to share static front end changes for review

Table of Contents

Background

A common use case that we have is to be able to share front end changes with non-developers. For most changes, this requires that a sandbox be built, but this is unnecessary for static front end development. This document describes a process that edX employees can use to share a static front end by publishing it to a dedicated Amazon S3 bucket. A similar process can be used by anyone in the community with access to a S3 for publishing static assets.

For example, if you make changes to the EdX Pattern Library then you can include an S3 URL in your pull request. This means that reviewers will be able to see your changes without having to install and build the pattern library themselves.

Pre-Requisites

  1. Request access to the UX test bucket from DevOps

  2. Install the AWS command line tool (awscli) 

    sudo pip install awscli
  3. Collect the following information that you will need to configure AWS

    • AWS Access Key ID - DevOps will provide you with this ID

    • AWS Secret Access Key - DevOps will provide you with the secret key

    • Default region name - us-east-1

    • Default output format - json

  4. Configure the command line (see Configuring the AWS command line for more details).

    aws configure
    [Provide each piece of information from above]

    If your AWS account is newer, you'll need to do a few extra configuration steps for the AWS CLI to work with our role-based auth system. See the Devops docs on Gaining Access to AWS for more.

  5. Define the following edX-specific environment variable in your .bashrc (or equivalent):

    export S3_PREVIEW_DOMAIN=ux-test.edx.org

If you have trouble, read the AWS command line documentation, our docs on  or consult with DevOps.

Upload to S3

You should now be ready to upload a directory containing your static site to S3. 

  1. Decide upon a unique name for your preview. Use the same naming scheme that you use for Git branches, e.g. andya/new-design
  2. Sync your changes to s3 with the following command: 

    aws s3 sync YOUR_DIR s3://ux-test.edx.org/YOUR/PATH
  3. You can now view the HTML at the following URL: 

    http://ux-test.edx.org/YOUR/PATH

Remove Files

  1. Remove your files from S3 using the rm command 

    aws s3 rm --recursive s3://ux-test.edx.org/YOUR/PATH