Create React App Template

Code Quality End to End Tests Unit and Regression Tests Create React App Chakra UI Redux Toolkit Storybook Jest Testing Library TestCafé ESLint Github Actions Yarn

This project was bootstrapped using cra-template-app, a batteries included create-react-app template with Chakra UI & Typescript made by Tiso Alvarez Puccinelli.

Requirements

Installation

Clone this project using Git. In a terminal, navigate to the cloned project’s root folder, and run the following command:

yarn && yarn start

Enabling GitHub Actions

Once you push your project to your own GitHub repo, you need to add some configurations so all the GitHub actions here work properly. If you don’t want those, you can delete the .github/workflows folder.

For the Code Quality analysis, enable code scanning on your repository.

For Chromatic, you need to create and account there, add your GitHub project, and add a CHROMATIC_PROJECT_TOKEN to your project secrets, as instructed here.

For Vercel deploy with E2E testing, you need to add VERCEL_ORG_ID, VERCEL_PROJECT_ID and VERCEL_TOKEN to your project secrets.

  1. You can get both VERCEL_ORG_ID, VERCEL_PROJECT_ID by linking your project with your vercel account using the vercel CLI command, and checking the file created at .vercel/project.json in your project. Further action instructions here.

  2. The VERCEL_TOKEN one can be generated on your Vercel token page, make sure to create a unique one.

Commands

  • yarn build-storybook: Creates a production build from the component library docs
  • yarn build: Creates a production build from this project
  • yarn check: Runs type and spell checking, code linter and unit tests
  • yarn coverage: Runs unit tests and opens a code coverage report on http://127.0.0.1:8080/
  • yarn start: Starts the project with hot reload at http://localhost:3000
  • yarn generate-theme-typings: Generates TypeScript typings for your custom Chakra theme (runs automatically on post-install)
  • yarn lint: Runs the code linter
  • yarn spellcheck: Checks for spelling typos in code
  • yarn start: Starts the project at http://localhost:3000, but you need to execute the yarn build command beforehand
  • yarn storybook: Starts the component library docs with hot reload at http://localhost:6006
  • yarn test-e2e: Runs all end to end tests using the locally installed Firefox browser, but you need to have started the project in another terminal for it to work
  • yarn test: Runs all unit tests and code coverage report
  • yarn type-check: Check validity of all types in the project

Technologies

This template uses:

Support

Liked this project and want to show your support? Buy me a coffee:

ko-fi