React Starter Boilerplate

Description

React Starter Boilerplate is a boilerplate for creating React.js web applications.

Table of Contents

• Installation
• Tools & Usage
• Tests
• Contributing
• Contact

Installation

Clone the repository:

git clone https://github.com/rama-kairi/react-starter-boilerplate.git

Description about the Branches

• main: The master branch is the default branch and have the stale code.
• next: The next branch is for the new features for testing purposes.
• starter: The starter branch is the one usually used for starting a new react project.

Install the dependencies:

    npm install

OR with Yarn

    yarn

Run the application:

    npm run dev

OR with Yarn

    yarn dev

Other Command Details (NPM)

• npm run build: Builds the application for production.
• npm run test/npm test: Runs the unit tests.
• npm run lint:scripts: Lints the code.
• npm run lint-fix:scripts: Linting and Fixing the code.
• npm run lint:styles: Lints the styles.
• npm run lint-fix:styles: Linting and Fixing the styles.
• npm run cypress:open: Opens the cypress application in the browser for running tests.
• npm run prepare: Prepares the Git Hooks for committing, pushing and merging.

Other Command Details (YARN)

• yarn build: Builds the application for production.
• yarn test: Runs the unit tests.
• yarn lint:scripts: Lints the code.
• yarn lint-fix:scripts: Linting and Fixing the code.
• yarn lint:styles: Lints the styles.
• yarn lint-fix:styles: Linting and Fixing the styles.
• yarn cypress:open: Opens the cypress application in the browser for running tests.
• yarn prepare: Prepares the Git Hooks for committing, pushing and merging.

Tools

There are number of awesome tools and utilities used in this project. (Starter Branch)

• React
• TypeScript
• Vite
• VSCode
• Husky
• Jest
• Cypress
• Eslint
• Prettier
• Style-lint
• lint-staged
• Github Actions
• Yarn
• Git
• GitHub
• semantic-release
• commitlint

Explaining the usages details of the tools and utilities used in this project is not included in this document as it is a long list of tools and utilities and I'm not sure if it is worth the time to explain their implementation here.

Don't just clone and use the project, rather deep dive into the project and understand the usage and implementation of the tools and utilities used in the Project.

Tests

Unit Tests - Jest

• Jest Unit testing framework is used for unit testing.
• You can run the unit tests by running the command npm run test or yarn test.
• The unit tests are written in the __tests__ folder.

Integration Tests (e2e) - Cypress

• Cypress is used for e2e testing.
• You can run the e2e tests by running the command npm run cypress:open or yarn cypress:open.
• The e2e tests are written in the cypress/integration folder.

Contributing

You can contribute to this project by making a pull request or opening an issue.

I'll be happy to accept any pull request or issue.

Contact

Contact me at:

• Github
• Twitter
• LinkedIn
• Email