happo-circleci-webinar.md

Install happo and plugin:

yarn add --dev happo.io happo-plugin-storybook

.happo.js config

const { RemoteBrowserTarget } = require('happo.io');
const happoPluginStorybook = require('happo-plugin-storybook');

module.exports = {
  targets: {
    chrome: new RemoteBrowserTarget('chrome', {
      viewport: '1024x768',
    }),
    firefox: new RemoteBrowserTarget('firefox', {
      viewport: '1024x768',
    }),
    edge: new RemoteBrowserTarget('edge', {
      viewport: '1024x768',
    }),
    'internet explorer': new RemoteBrowserTarget('internet explorer', {
      viewport: '1024x768',
    }),
    safari: new RemoteBrowserTarget('safari', {
      viewport: '1024x768',
    }),
    'ios-safari': new RemoteBrowserTarget('ios-safari', {
      viewport: '375x667',
    }),
  },
  plugins: [
   happoPluginStorybook(),
  ],
};

.storybook/config.js

import 'happo-plugin-storybook/register';

.circleci config:

version: 2.1
orbs:
  happo: happo/happo@1.0.1
workflows:
  version: 2.1
  run_all:
    jobs:
      - happo/run

Backup links:

First pull request: happo/happo-circleci-webinar#4

Background color change: https://happo.io/a/91/p/95/compare/5943ae487b7b98d3f7944b3970524380959ece76/cd186b86ff079600b98ae95016d49bea5f21ba74