React App

This is a template for a Create React App with additional tools.

• Tech-Stack
• Getting started
• Test Driven Development
• Commands
• Skipping linters

It uses the following tools/libraries:

Tech-Stack

• Storybook
• Jest
• Stylelint
• Eslint
• Prettier

Project Setup

This project uses different deployments to make code reviews easier:

• Vercel (App Production)
• Vercel (App Preview)
• GitHub Pages (Storybook Production)
• Surge (Storybook Preview)

Set up Vercel

Please follow this guide: https://vercel.com/docs/concepts/git

Setup GitHub Pages

Please follow this guide: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

Use the gh-pages branch

Setup Surge

To generate a surge token please use the following command

npx surge token

It will output something like this:

❯ npx surge token

   1234567890abcdefghijklmnopqrstuv

Add this token to your GitHub secrets

We only need it for the "Preview" Environment, but you can add it to both (see screenshot below)

Getting started

Run the development server:

npm run dev

Run storybook:

npm run storybook

Test Driven Development

We jest to write unit tests. Please look at the Documentation for Jest and testing-library.

Commitlint

We use commitlint to ensure conventional commit messages. You can read more about our decision in the documentation.

Commands

Run the development server:

npm run dev

Build:

npm run build

Run storybook:

npm run storybook

Build storybook:

npm run storybook:build

Run unit tests:

npm run jest
# npm run jest:watch # watch
# npm run test:unit # same as "npm run jest"

Run all tests:

npm run test

Run stylelint

npm run stylelint

Run eslint

npm run eslint

Run all linters

npm run lint