Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/The24thDS/vite-reactts18-chakra-jest-husky

ReactJS 18 starter template using Vite, Typescript, Jest, ESLint, Prettier, Chakra UI
https://github.com/The24thDS/vite-reactts18-chakra-jest-husky

chakra-ui eslint framer-motion husky jest prettier react17 reactjs testing-library-react typescript

Last synced: about 2 months ago
JSON representation

ReactJS 18 starter template using Vite, Typescript, Jest, ESLint, Prettier, Chakra UI

Lists

README

        

# ReactTS 18 with Chakra UI and Vite

This is a [React](https://reactjs.org) + [TypeScript](https://www.typescriptlang.org/) + [Chakra UI](https://chakra-ui.com) boilerplate to be built with [Vite](https://vitejs.dev). It also includes [Husky](https://typicode.github.io/husk) and a pre-commit hook that runs `yarn format`.

## What's inside?

- [ReactJS](https://reactjs.org)
- [Vite](https://vitejs.dev)
- [TypeScript](https://www.typescriptlang.org)
- [Chakra UI](https://chakra-ui.com)
- [Framer Motion](https://www.framer.com/motion/)
- [Jest](https://jestjs.io)
- [Testing Library](https://testing-library.com)
- [Eslint](https://eslint.org)
- [Prettier](https://prettier.io)
- [Husky](https://typicode.github.io/husky)

\+ other smaller dependencies

## Getting started

1. Create the project.

```bash
npx degit The24thDS/vite-reactts18-chakra-jest-husky my-app
```

2. Access the project directory.

```bash
cd my-app
```

3. Initialize a git repository.

```bash
git init
```

4. Install dependencies.

```bash
yarn
```

5. Serve with hot reload at http://localhost:5173.
```bash
yarn dev
```

## Recommended VS Code extensions

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)

## Other commands

### Lint commands

- Run eslint
```bash
yarn lint
```
- Run eslint with fixing
```bash
yarn lint:fix
```

### Build commands

```bash
yarn build
```

### Test commands

- Run tests with coverage (will open the coverage if all tests succeed)
```bash
yarn test
```
- Watch tests
```bash
yarn test:watch
```

### Commit commands
This project use [commitlint](https://github.com/conventional-changelog/commitlint) to ensure that commit messages are [conventional-changelog](https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional) compliants.

To help you build more efficient commit messages, you can use the [commitizen](https://github.com/commitizen/cz-cli) package by running this command :
```bash
yarn cz
```

## License

This project is licensed under the MIT License.