/next-emotion

Template repo with Next.js, Emotion styling, Storybook, and TypeScript

Primary LanguageTypeScriptMIT LicenseMIT

Storybook Chromatic Library Dependabot Status

Next.js Template

Screen Recording 2021-01-11 at 10 30 27 AM

Want a template application with all 100's on Lighthouse? Look no further, this is a simple template application with the following stack:

Installation

You must have yarn and node>=12.16.1 installed first. To install the dependencies run:

yarn install

To start the application in development mode run:

yarn dev

To run a static version of the site locally run:

yarn static

Testing

Run unit tests:

yarn test

Run e2e tests:

yarn cypress run

Scripts provided

  • install install dependencies
  • dev run in dev mode with hot-module replacement @ http://localhost:3000/
  • build build next.js application
  • export export next.js static application to ./out
  • static build/export/serve a static next.js application @ http://localhost:3000/
  • validate run tests/linter/type-checks/format-checks and build the application (the build checks for transpiler errors)
  • test run jest tests
  • cypress run cypress
  • lint run linter with --fix
  • lint:test run linter
  • format format code w/ prettier
  • format:test check for code formatting w/ prettier (won't modify code)
  • storybook runs storybook @ http://localhost:6006
  • storybook:build builds storybook output for static deployment (necessary for Chromatic)

Husky Hooks

  • pre-commit lints the staged files and formats them automatically
  • pre-push runs the validate script

Setup

Chromatic & Github

To enable Chromatic, set the CHROMATIC_PROJECT_TOKEN secret: Image 2020-05-09 at 9 14 37 PM

Screenshots

Chromatic - Storybook

Storybook Example

Chromatic - Library

Chromatic Library Example