okradze/vite-react

A modern React + TypeScript + Vite starter with pre-configured ESLint, Prettier, Git hooks, Commitlint, React Testing Library, Vitest and GitHub Actions out of the box 📦

React + TypeScript Starter

A modern React + TypeScript + Vite starter with pre-configured ESLint, Prettier, Git hooks, Commitlint, React Testing Library, Vitest and GitHub Actions out of the box 📦

Features

• ⚡️ Vite - Next Generation Frontend Tooling
• ⚛️ React 18 - A JavaScript library for building user interfaces
• 💎 TypeScript - Why not?!
• 🔨 ESLint - JavaScript linter
• 🌀 Prettier - Code Formatter
• 🐺 Husky - Native Git hooks
• 🐺 Lint Staged - Run Linters On Staged Files
• 📑 Commitlint - Linting your commits based on commit convention
• ⚙️ Vitest - Unit Testing Framework
• ⚙️ Testing Library - Test UI components in a user-centric way
• 🔬 GitHub Actions - CI with GitHub Actions
• ⌨️ Alias Imports

IDE

We encourage you to use Visual Studio Code

Please install the following plugins:

• Code Spell Checker
• ESLint
• EditorConfig
• Prettier

Optional plugins:

• GitLens
• TODO Highlight

React Folder Structure

components # Reusable components used in multiple pages.
└── Button # One example of component
    ├── __tests__ # All test files related to Button
    │   └── Button.test.tsx # Component Unit Test
    ├── Button.module.scss # Button styles
    ├── Button.tsx # Component file
    └── index.tsx # Exports component outside
pages
└── Counter # One example of page
    ├── __tests__ # All test files related to Counter page
    │   └── Counter.test.tsx # Component Unit Test
    ├── hooks # Hooks related only to Counter page
    │   ├── __tests__
    │   │   └── useCounter.test.ts
    │   └── useCounter.ts
    ├── components # You could have components related only to Counter page.
    ├── utils # You could have utils related only to Counter page.
    ├── Counter.module.scss
    ├── Counter.tsx
    └── index.tsx # Exports page component
routes # All the routes
hooks # You may have hooks folder used in multiple pages or components in top level directory
├── __tests__
│   ├── useSomeHook.test.ts
│   └── useOtherHook.test.ts
├── useSomeHook
└── useOtherHook

Idea is to have related files in one place.

By this every component or page has its own folder with its own tests and styles. Every page has its own components, hooks, utils.

Node Version

We use NVM to manage the Node version. You can install it NVM

Version is specified in .nvmrc file.

After installing NVM, run the following command to install the Node version used in this project:

nvm install
nvm use

Install Dependencies

We use yarn to manage the dependencies. You can install it by running the following command and then install dependencies:

npm install -g yarn
yarn # or yarn install

Scripts

In this project, you can run the following scripts:

Script	Description
yarn dev	Runs the app in the development mode.
yarn build	Builds the app for production to the dist folder.
yarn preview	Serves the production app locally after build.
yarn lint	Lints the project
yarn test	Runs and watches unit tests.
yarn test:coverage	Gets unit test coverage.
yarn test:ci	Runs unit tests once.
yarn test:ui	Runs unit test in UI.

Committing

We use Commitlint to lint our commit messages. This ensures that we have consistent commit messages.

Example of a good commit message:

git commit -m "feat: add new button component"

Commit Types:

Type	Description
feat	A new feature for user, not a new feature for build script
fix	A bug fix for user, not a fix to a build script
chore	Other changes that don't modify src or test files
style	Changes that do not affect the meaning of the code (white-space, formatting)
docs	Documentation only changes
refactor	A code change that neither fixes a bug nor adds a feature
perf	A code change that improves performance
test	Adding missing tests or correcting existing tests
build	Changes that affect the build system or external dependencies
ci	Changes to our CI configuration files and scripts
revert	Reverts a previous commit

License

MIT