Continuous Deployement - peter-mouland/react-lego-2017 GitHub Wiki

http://react-lego.herokuapp.com

The main technologies used to achieve continuous deployment are:

Using these four together I can automatically test the app at different stages, on multiple browsers, and get it deployed.

Workflow

continuous deployment diagram

The diagram show that tests are run at each stage. The fast tests are run sooner, leaving the slower tests until later in the process.

Although locally we run the tests using only a single browser or PhantomJS, remotely we use BrowserStack to ensure that all browsers are covered.

We are also utilising Heroku to test the deployed code on pre-prod. This step is massively important and once on pre-prod, the code and app looks exactly the same as it would do on prod. When we run our ent-to-end tests against pre-prod using all important browsers we know the site will work.

Once everything is green we get CircleCI to automatically to push to Prod where we run a smaller set of end-to-end tests called Smoke tests. This is a final check to ensure that Prod is up and running.
It is not meant to test any more functionality as we should have ran all our tests by now.

How to get CircleCI to do the heavy lifting


deployment:
  main:
    branch: master
    commands:
      - wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip"
      - unzip BrowserStackLocal-linux-x64.zip
      - ./BrowserStackLocal $BROWSERSTACK_KEY -force:
          background: true
      - "[ ! -s \"$(git rev-parse --git-dir)/shallow\" ](/peter-mouland/react-lego-2017/wiki/-!--s-\"$(git-rev-parse---git-dir)/shallow\"-) || git fetch --unshallow"
      - git push [email protected]:react-lego-preprod.git $CIRCLE_SHA1:refs/heads/master -f --no-verify
      - npm run test:e2e-xb -- --sha=$CIRCLE_BUILD_NUM --target=http://react-lego-preprod.herokuapp.com --retries 4
      - git push [email protected]:react-lego.git $CIRCLE_SHA1:refs/heads/master -f --no-verify
      - npm run test:e2e-smoke -- --sha=$CIRCLE_BUILD_NUM --target=http://react-lego.herokuapp.com --retries 4

``