Skip to content

Latest commit

 

History

History
82 lines (52 loc) · 3.58 KB

README.md

File metadata and controls

82 lines (52 loc) · 3.58 KB
Raw

Introduction

A React.js SPA that demonstrates various front-end coding and testing practises. The site can be accessed here, using the username readonly and the password Readonly1.

CircleCI License: MIT

Overview

This React.js SPA features the following:

  • CRUD GraphQL operations via Apollo client
  • Lean testing of an SPA, utilizing Jest for unit tests, Storybook image screenshots and Reg Suit for visual regression testing, and Cypress for end-to-end testing
  • Flow for static type checking of the JavaScript
  • An approach to React component creation that separates the visual appearance from the behaviour implementation, as described by Dan Abramov.
  • A module-based approach to the structuring of the app's source files
  • Circle CI for continuous integration and deployment
  • Use of Grommet component library (specifically a beta of the upcoming Version 2 of Grommet)
  • Use of React App Rewired to avoid ejecting a project bootstrapped with Create React App

Development

All of the following can be run simultaneously locally—you just need a populated .env file:

  • yarn start - runs the app locally
  • yarn storybook - run storybook locally
  • yarn test - run jest tests
  • yarn cypress - run cypress tests
  • yarn run screenshot - create/update storybook screenshots

Build Size

You can check on the included packages in the build with the following, replacing the xxxx with the actual bundle checksum value:

source-map-explorer ./build/static/js/main.xxxx.js ./build/static/js/main.xxxx.js.map

Limitations

I was unable to use a graphql/gql file loader with Babel or Webpack as Storybook does not pick it up.

Troubleshooting

Apollo Client

I might get this problem with Apollo Link State: "local client data getting nulled out after making a query that involves a round trip to the server." For the moment, reverting to 0.4.0 will fix the problem.

Grommet Icons Inclusion

Make sure that the whole of the grommet-icons package does not get included in the production build.

This also requires uses of withTheme...

import { withTheme } from "grommet/components/hocs";

... to be translated to:

import { withTheme } from "grommet/es6/components/hocs";

Firefox

If you get the 'performing a tls handshake to localhost' issue, follow the instructions here and then restart Firefox. (For OS X, the location for me was ~/Library/Application Support/Firefox/Profiles/ and I had to delete the cert8.db and cert9.db files.)

Console Errors

Message: Network error: Store reset while query was in flight(not completed in link chain) Bug: Github issue

Maintenance

Flow

To update flow types for used packages:

flow-typed install