react-template

A ready-to-use React template βš›οΈ with TypeScript πŸ”΅, ESLint πŸ› οΈ, Prettier πŸ–‹οΈ, Jest πŸƒ, Husky 🐢, and TailwindCSS 🌈 for quick project starts. Commercial license required.

OTHER License

Stars
0
Committers
2

Bot releases are hidden (Show)

react-template - Initial Release: React Template CI/CDπŸš€ Latest Release

Published by Jagoda11 3 months ago

Initial Release: React Template CI/CD πŸš€

This release includes the initial version of the CI/CD pipeline for the React Template project. It comes pre-configured with essential tools and libraries to streamline the development process.

Features:

  • TypeScript: Provides type safety and enhances code quality.
  • ESLint: Lints the code to maintain a consistent code style.
  • Prettier: Formats the code for readability.
  • Jest: Runs tests and provides coverage reports.
  • Husky: Manages Git hooks to enforce pre-commit checks.
  • TailwindCSS: Integrates utility-first CSS for rapid UI development.

GitHub Actions Workflows:

  • CI Pipeline: Automatically builds, tests, and lint your code on every push and pull request.
  • Remove Merged Branches: Automatically deletes branches after they have been merged.
  • Remove Stale Unmerged Branches: Deletes branches that have not been updated in a specified period.
  • Welcome Messages: Posts welcome messages on new issues and pull requests.
  • Label New Pull Requests: Automatically adds labels to new pull requests.
  • Close Stale Issues and PRs: Closes issues and pull requests that have been inactive.

How to Use:

  1. Clone the repository.
  2. Install dependencies with npm ci.
  3. Use npm run build to build the project.
  4. Run npm run test to execute tests and generate coverage reports.
  5. Format code using npm run format.
  6. Lint code with npm run lint.

Example Usage:

name: CI

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [21.x]

    steps:
      - uses: actions/checkout@v2
      - name: πŸ› οΈ Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
      - name: πŸ“¦ Install dependencies
        run: npm ci
      - name: πŸ–‹οΈ Format code
        run: npm run format
      - name: 🧹 Lint code
        run: npm run lint
      - name: πŸ”¨ Build
        run: npm run build
      - name: πŸ§ͺ Test with coverage
        run: npm run test


### πŸ›’ Purchase a License

This project is licensed under the terms of the Commercial License Agreement. To purchase a commercial license, please contact me via GitHub or through the [sponsorship page](https://github.com/sponsors/Jagoda11).

### πŸ’– Support

If you like this hassle-free and easy setup, and if it saved you some time, please consider obtaining a commercial license and sponsoring me on [GitHub Sponsors](https://github.com/sponsors/Jagoda11). Your support is greatly appreciated and helps me continue my contributions to open source and volunteer work.
react-template - Initial Release πŸŽ‰

Published by Jagoda11 3 months ago

  • React for building user interfaces.
  • Babel for transpiling JavaScript.
  • TypeScript for static typing.
  • ESLint for linting JavaScript and TypeScript code.
  • Prettier for code formatting.
  • Jest for testing.
  • Husky for managing git hooks.

Features

  • Consistent Project Structure: Provides a standardized folder structure.
  • Integrated CI/CD Workflows: Pre-configured GitHub Actions workflows for continuous integration and delivery.
  • Support for GitHub Codespaces: Configuration for GitHub Codespaces to ensure a consistent development environment.
  • Automatic Formatting and Linting: Ensures code quality and consistency using Prettier and ESLint.
  • Comprehensive Test Setup: Pre-configured Jest for writing and running tests.

Extensions Included

  • GitLens: Supercharge Git capabilities in VS Code.
  • ESLint: Integrates ESLint into VS Code.
  • Prettier: Code formatter.
  • Docker: Docker support for VS Code.
  • Babel ES6/ES7 Syntax Coloring: Syntax highlighting for ES6
Related Projects