Warning

This repository hasn't been updated in a while. Look into docs.happo.io for more up-to-date documentation.

This is an example project demonstrating how happo.io can be used in a TypeScript project generated by create-react-app.

For those of you looking for a copy-paste solution, these are the steps involved in getting happo integrated with create-react-app:

1. Add required dependencies:

yarn add --dev happo.io babel-loader

2. Configure .happo.js:

const craWebpackConfig = require('react-scripts/config/webpack.config')

module.exports = {
  customizeWebpackConfig: config => {
    // Use the built-in webpack config provided by create-react-app
    config.module = craWebpackConfig('development').module;
    return config;
  },
};

3. Create a test file, e.g. Button-happo.tsx:

import React from 'react';

export default () => <button>Click me</button>;

4. Add a happo script to package.json:

"scripts": {
  "happo": "NODE_ENV=development happo"
},

5. Run happo!

yarn happo run