React Starter Template

This is a React + TypeScript starter template built with Vite. We provide everything you'll need to get started building React Apps.

Awesome thing you get out-of-the-box are:

• ReactJS 17
• Vite Next Generation Frontend Tooling
• TypeScript
• React Router 6 Single Page App (SPA) navigation
• ESLint Enforce code standards
• Browserslist Supported browsers
• Prettier Code formatting
• Commitlint
• Commitizen
• Jest Test runner
• Testing Library Test UI from a users perspective (for React and Cypress)
• Cypress
• PULL_REQUEST_TEMPLATE Consistent and helpful colabouration.

💻 Development

Create the project.

npx degit truonghungit/react-starter-template my-app

Access the project directory.

cd my-app

Initialize a git repository.

git init

Install dependencies.

yarn install

Start your application in local development server with hot reload at http://localhost:3000.

yarn dev

🤖 Testing

Unit tests

Execute all unit tests

yarn test:unit

Execute all unit tests and collect coverage

yarn test:unit:coverage

End to end testing

Run e2e tests

yarn test:e2e

🌲 Branching

We use Trunk Based Development to accommodate short-lived branches and a "trunk" (our master branch) as a source of truth.

• Feature: feature/*

  Example: feature/JIRA-123-my-new-feature

• Bug: bugfix/*

  Example: bugfix/JIRA-123-fix-an-issue

• Release: release/*

  Example: release/JIRA-123-brand-new-product

🏆 Making Commits

We format our commit messages using Commitizen. This provides the project a consistent, easy structure that allows for automation opportunities.

• It is important that you use Commitizen when making commits

• In your terminal run yarn commit when making a commit to enter the interactive GUI.

💾 Pull Requests

This project has a template that sets the pull request structure that we expect from contributors.

• It is important to give as much context to get the best review from your peers.

  (write the pull request that you would love to encounter yourself)

• You do not have to fill out each section if it is not applicable.

🗜️ Merging

We always Squash our Pull Requests. This makes a cherry-pick from master to a release/* branch when addressing a Bug Fix easy.

Make sure to ALWAYS rebase (not merge) master into your local branch when developing. We strive for a flat Git commit history when possible.

Recommended VS Code extensions

• ESLint
• Prettier
• Gitlens
• Tailwind CSS
• VS Code Jest

License

This project is licensed under the MIT License.