React SPA Continuous Delivery with GitLab

What is CI/CD?



What is a CI/CD Setup in GitLab?

Gitlab



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

Static SPA



CI/CD with a Static SPA

Buckets



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

Deliver new code


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

Dealing with Data Upgrades on-Client

Upgrade



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
            })
        );
}