React Repository Template

⭐ Star this repository if you find it valuable and worth maintaining.

👁 Watch this repository to get notified about new releases, issues, etc.

Description

This is a GitHub repository template for a React website. You can use it:

• to create a new repoisitory with automation and environment setup,
• as reference when improving automation for an existing repository.

It includes:

• continuous integration via GitHub Actions,
• build automation via Yarn,
• dependency management using NPM Packages,
• code formatting and linting using eslint,
• code coverage HTML report
• dependencies scanning and updating thanks to Dependabot,
• security code analysis using CodeQL Action,

Usage

1. Sign up on Codecov and configure Codecov GitHub Application for all repositories.
2. Click the Use this template button (alt. clone or download this repository).
3. Replace all occurrences of runtime-machines/react-template to your_org/repo_name in all files.
4. Replace all occurrences of react-template to repo_name in all files.
5. Update the following files:
   • CHANGELOG.md
   • CODE_OF_CONDUCT.md
   • LICENSE (when defined)
   • README.md

Install

yarn

Develop

yarn start

Build

yarn build

Lint

yarn lint

Test

yarn test

Test Coverage

yarn test:coverage

Details

Folder Structure

.
├── public                        # Express server static path and Webpack bundles output
│   ├── favicon.ico               # App favicon
│   ├── logo192.png               # App logo small
│   ├── logo512.png               # App logo large
│   └── manifest.json             # App favicon and logo manifest
├── src                           # App source code
│   ├── config                    # App configuration by environments
│   ├── app                    	  # App root component
│   ├── components                # Reusable components
│   ├── pages                     # Page components
│   ├── layouts                   # Layouts available to the whole project (e.g. footer etc.)
│   ├── utils                     # App-wide utils (e.g. mock store creator for testing etc.)
│   ├── static                    # Static assets (e.g. images, fonts etc.)
│   └── routes                    # Routes configuration for both client-side and server-side
├── webpack*                      # Webpack configurations
├── tsconfig.json                 # TypeScript configuration
└── .eslintrc.*                   # ESLint configuration

Supported Browsers

This setup uses Browserslist to target browsers.

The default list of supported browsers is listed in the package.json file:

{
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
  }
}

This means that supported browsers vary based on current usage data.

License

This project license

Contribution

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the license, shall be licensed as above, without any additional terms or conditions.

See CONTRIBUTING.md.