This is a template for a Create React App with additional tools.
- Tech-Stack
- Getting started
- Behavior Driven Development
- Test Driven Development
- Commitlint
- Commands
- Skipping linters
It uses the following tools/libraries:
This project uses different deployments to make code reviews easier:
- Vercel (App Production)
- Vercel (App Preview)
- GitHub Pages (Storybook Production)
- Surge (Storybook Preview)
Please follow this guide: https://vercel.com/docs/concepts/git
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
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)
Run the development server:
npm run dev
Run storybook:
npm run storybook
We use behavior tests. You can read more about our decision in the documentation.
We jest to write unit tests. Please look at the Documentation for Jest and testing-library.
We use commitlint to ensure conventional commit messages. You can read more about our decision in the documentation.
Run the development server:
npm run dev
Build:
npm run build
Run storybook:
npm run storybook
Build storybook:
npm run storybook:build
Run e2e tests:
npm run cypress # local without server
# npm run cypress:run # headless
# npm run test:e2e # with server
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
If you need to skip a linter you can add the --no-verify
flag.
Warning! We strongly advise against skipping linters.
# Skipping commitlint
git commit README.md -m "this is a dirty commit" --no-verify
# Skipping linters
git push --no-verify