Create Boilerplate React

This is a repository that can be used as a template for any React project. Context provider and consumer already configured. Uses Github Actions as a pipeline, to work with CI/CD using Cypress with snapshots for tests e2e, Jest/React Testing Library for unit testing, and also checks for eslint rules.

Quick Start

npx create-boilerplate-react my-app
cd my-app
yarn start

Available Scripts in the application

yarn install

Install app dependencies

yarn start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console:

yarn test

Launches the unit test runner (Jest/RTL) in the interactive watch mode.

yarn test:coverages

Launches the unit test runner (Jest/RTL) and shows a report of testing coverage

yarn cy:open:local

Launches the e2e test runner (Cypress) in http://localhost:3000 with snapshots turned off.

Change url and PREVIEW_ENV flag to use it in a different way.

yarn lint

Checks for linting rules

Output

.
├── README.md
├── jest-setup.ts
├── jest.config.js
├── package.json
├── cypress.json
├── .gitignore
├── .eslintrc.js
├── .prettierrc
├── node_modules
├── public                          # React App Assets
├── cypress                         # Cypress e2e testing configs and plugins
├── .github                         # Github Actions pipeline configuration
└── src                             # React App folder
    ├── context
    ├── globals
    ├── routes
    ├── utils
    │   ├── home
    │   ├── App.e2e.js
    │   ├── App.spec.js
    │   └── index.js
    ├── GlobalStyles.js
    ├── index.js
    └── setupTests.js

Packages installed and preconfigured

Package | Version ------------ | ------------- React & react-dom | 18.0.0 react-router-dom | 6.3.0 react-scripts | 5.0.1 styled-components | 5.3.5 @testing-library/react | 13.1.1 @testing-library/user-event | 14.1.1 @testing-library/jest-dom | 5.16.4 @testing-library/cypress | 8.0.2 cypress | 9.5.4 cypress-plugin-snapshots | 1.4.4 eslint | 8.13.0 eslint-config-prettier | 8.5.0 eslint-config-standard | 17.0.0 eslint-plugin-cypress | 2.12.1 eslint-plugin-import | 2.26.0 eslint-plugin-node | 11.1.0 eslint-plugin-prettier | 4.0.0 eslint-plugin-promise | 6.0.0 eslint-plugin-react | 7.29.4  prettier | 2.6.2

Author

👤 Pau Rodríguez

• Website: https://www.linkedin.com/in/paurodriguezmolina/
• Github: @Silinde87
• LinkedIn: @paurodriguezmolina
• Twitter: @Silinde87