React SPA Continuous Delivery with GitLab

What is CI/CD?

• Automatic
• Conditional
• Tested
• Idempotent
• Frequent

What is a CI/CD Setup in GitLab?

• GitLab CI
• Based on Docker
• Shared or hosted/BYOM
• Triggered by & linked to code
• Artifacts, etc.

image: node:latest

before_script:
  - npm version
  - npm install &>/dev/null

test:
  script:
  - npm test -- --forceExit

staging:
  type: deploy
  script:
  - npm run build
  - ./some_deploy_script
  only:
  - master

production:
  type: deploy
  script:
  - npm run build
  - ./some_deploy_script
  only:
  - tags
  artifacts:
    paths:
    - build/
    expire_in: 1 week

Example CI/CD Flow

Pros and Cons of a Static SPA

• Drastic failure mode
• Clients are remote
• Poor SEO/API
• Scalable, Simple
• Zero downtime
• Treated as a client

CI/CD with a Static SPA

• Compile and drop into bucket
• For easy rollback, version buckets
• Optionally, upgrade to Cloudfront

staging:
  type: deploy
  script:
  - apt-get update -qy
  - apt-get install -y python-dev python-pip
  - pip install awscli
  - aws --version
  - npm run build
  - aws s3 sync build/ s3://$BUCKET_STAGING
  - ./ping_clients_staging
  only:
  - master

Dynamically Upgrading Continuous Sessions

• On the page for months!
• How do other clients handle this?
• Signal, wait for downtime, pounce
• Polling or sockets for a version
• Watch visibility API
• Watch input/progress state

    Semver Upgrade
    Invisible
    Unchanged
    Time Threshold
  + Connectivity
--------------
    Reload!

Dealing with Data Upgrades on-Client

• Start caching early
• Store versions early
• Client cache is unreliable
• Have caching/versioning middleware

import pkg from '../../package.json';
const version = pkg.version;

/**
 * get value for key
 *
 * @access public
 * @param {string} key
 * @returns {object|array} [value]
 */
export function getItem(key) {
    if (!window.localStorage) return;
    const item = localStorage.getItem(key);
    let parsed = item && JSON.parse(item);
    if (parsed && parsed.version) {
        if (version === parsed.version) {
            return parsed.data;
        }
    }
}
/**
 * set value for key
 *
 * @access public
 * @param {string} key
 * @param {object|array} value
 */
export function setItem(key, value) {
    if (!window.localStorage) return;
    return localStorage
        .setItem(
            key,
            JSON.stringify({
                version,
                data: value
            })
        );
}