Documentation

# Brief Summary

Append query string parameter s_code_branch={feature-branch-name} to any page to force the site to pull in the code from feature branch for the duration of the user's session.

# Overview

Luminate Online test environment has been enhanced with the ability to dynamically switch between Git feature branches using the session query string parameter s_code_branch.

Specifying a previously pushed code feature branch using the query string parameter will set a session variable which causes all app assets to be pulled from the feature asset sub-repository of the staging S3 bucket & CDN for the duration of the user's Luminate session.

This enhancement allows development and review of multiple, concurrent feature branches while leaving the staging branch release-ready at all times. That is, staging will only contain features which have been expressly approved by the client and are ready to be included in the next release cycle.

# Creating Dynamic Feature Branch Review URL

When a locally developed feature is ready for client you review you can create a dynamic feature branch review URL for the client by doing the following:

  1. Note the name of the feature branch (ex. feature/12345/description).
  2. Push the branch to BitBucket (ex. git push origin feature/12345/description).
  3. Wait 2-3 minutes for the branch to fully deploy. You will see a success message in the #bitbucket Slack channel (opens new window) when the feature branch has deployed. Alternatively, you can view the status of the build from the Commits tab (opens new window) of the Bitbucket Web UI.
  4. Add the query string parameter s_code_branch to any page and set it equal to the prepended feature branch name (ex. https://lo-test.savethechildren.org/site/SPageServer/?pagename=deploymenthome&s_code_branch=feature/18653448/donation-flexible-giving (opens new window)).

If the site appears unstyled check the branch name to confirm it is correct. Also confirm that the feature push is complete and was successful.

The applied feature branch will be active for the duration of the user's Luminate session.

Additional examples of adding the parameter to various URL types:

# Code

The code for the feature branch setting is usually defined in a reus_assets_path PageBuilder reusable as a session variable. The scripts & styles then use the session variable in their path. If necnessary, edit the file with WYSIWYG disabled and with caution.

# Conditionalizing Feature Branch Content

All template changes made to PageBuilder pages should be wrapped in a conditional to ensure that the modifications are only active when your feature branch is being viewed. Below is an example conditional:

[[?[[S80:code_branch]]::feature/12345/my-feature::
  <!-- "feature/12345/my-feature" branch code -->
::
  <!-- "staging" branch code -->
]]

# Proxying Feature Branch JS/CSS with Charles Proxy

When viewing a feature branch on Luminate all assets are referenced from a subfolder structure of the CDN which matches the feature branch name. For example, when viewing feature branch feature/12345/my-feature, the URL of the main stc-scripts.js file changes from https://d290h2g0ajcvb3.cloudfront.net/js/stc-scripts.js to https://d290h2g0ajcvb3.cloudfront.net/feature/12345/my-feature/js/stc-scripts.js. This will cause the file not to be picked up by any Map Local rules you have in place with Charles Proxy.

To account for this, you can use a Rewrite rule to remove the feature branch name from the request URL. This will allow your Map Local rule to identify and proxy the request. A rewrite has already been created for this purpose and can be imported into Charles by doing the following:

  1. Open Charles
  2. Navigate to: [Tools -> Rewrite Settings].
  3. Click Import.
  4. Select the file at /dnl intranet/Customers/Current Customers/Save The Children/Assets/DeveloperResources/Proxy/stc-lot-feature-branch-rewrite.xml
  5. Save changes.

← Feature branches →