Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codelytv/typescript-react_best_practices-vite_template
<⚡⚛️> Start your React project with Vite following code best practices (TypeScript, Linting, testing, CI/CD…)
https://github.com/codelytv/typescript-react_best_practices-vite_template
cypress editorconfig eslint github-actions jest makefile react react-starter react-template reactjs swc typescript typescript-react vite vite-starter vite-template vite-template-react
Last synced: 3 days ago
JSON representation
<⚡⚛️> Start your React project with Vite following code best practices (TypeScript, Linting, testing, CI/CD…)
- Host: GitHub
- URL: https://github.com/codelytv/typescript-react_best_practices-vite_template
- Owner: CodelyTV
- License: mit
- Created: 2023-03-28T13:34:15.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-03T22:51:04.000Z (over 1 year ago)
- Last Synced: 2024-08-13T07:15:46.673Z (3 months ago)
- Topics: cypress, editorconfig, eslint, github-actions, jest, makefile, react, react-starter, react-template, reactjs, swc, typescript, typescript-react, vite, vite-starter, vite-template, vite-template-react
- Language: SCSS
- Homepage: https://pro.codely.com/library/react-de-0-aplicando-buenas-practicas-192069/about/
- Size: 299 KB
- Stars: 166
- Watchers: 4
- Forks: 21
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
<⚡⚛️> Vite React Best Practices Template (by Codely)
Template for creating React apps with TypeScript following best practices: Unit and end-to-end tests, Continuous Integration, and linting.
Stars are welcome 😊
## ⚡ Using this Vite template
1. Create your project based on this template:
- a) If you want to create a GitHub repository, we would recommend to use the GitHub "Use this template" button and clone your newly created repository
- b) If you prefer to just create a local project, you can use [degit](https://github.com/Rich-Harris/degit):
```bash
npx degit CodelyTV/vite-react_best_practices-template#main my-app
```
2. Update your project meta-information:
- [ ] Update the [`package.json`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/package.json):
- [ ] Specify proper values for the `name`, `author` and `license` properties
- [ ] Remove the `private` property if you plan to publish the app as a npm package
- [ ] Change the author in [`LICENSE`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/LICENSE)
- [ ] Change the title in [`index.html`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/index.html)
- [ ] Replace the favicon in the [`public`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/public) directory
- [ ] Clean up this [`README.md`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/README.md)
3. Run your app:
1. `cd my-app`: Move to your project root directory
2. `npm install`: Install all the project dependencies
3. `npm start`: Start the development server on [localhost:3000](http://localhost:3000)
## ✅ Testing
### Unit tests
`npm run test`: Run unit tests with Jest and React Testing Library
### End-to-end tests
1. `npm start`: Start the development server on [localhost:3000](http://localhost:3000)
2. Run end-to-end tests with Cypress choosing one of the following options:
- `npm run cy:open`: Open Cypress in dev mode
- `npm run cy:run`: Execute Cypress in CLI
## 🔦 Linting
- `npm run lint`: Run linter
- `npm run lint:fix`: Fix lint issues
## 🌈 Tech Stack
- [TypeScript](https://www.typescriptlang.org)
- [ESLint](https://eslint.org) and [Prettier](https://prettier.io) already configured with the [🤏 Codely's configuration](https://github.com/CodelyTV/eslint-config-codely)
- [Jest](https://jestjs.io) with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) for the unit tests
- [Cypress](https://www.cypress.io) with [Testing Library](https://testing-library.com/docs/cypress-testing-library) for the end-to-end tests
- [GitHub Action Workflows](https://github.com/features/actions) set up to run tests and linting on push
- [Makefile](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/Makefile) for standardize how to run projects
- [Sass](https://sass-lang.com) to supercharge CSS with nested classes and more fun
- [.editorconfig](https://editorconfig.org) for sharing the IDE config
## 🤔 FAQ
### 🤷♂️ Why Vite and not Next.js, Remix, or Create React App
React updated the official recommendation about how to start a new project. Previously, they recommended Create React App (CRA) and we did [this very same template based on CRA](https://github.com/CodelyTV/cra-template-codely), and right now they recommend to directly use a framework like Next.js, Remix, or Gatsby.
However, they also include an specific section in the official documentation on how to use React without a framework, and the recommended way is to use Vite or Parcel.
Even if not using a framework such as Next.js is something to double check, we are interested into having this template for use cases where you are not interested into the benefits of a complete framework. For instance, theses cases could be as simple as learning the React.js features and limitations in order to have a clear vision where React ends and a framework starts. This is something we do in [our React video course](https://pro.codely.com/library/react-de-0-aplicando-buenas-practicas-192069/460310/about/).
### 👻 Why not adding `.vscode` or `.idea` to the `.gitignore` template
These are folders created due to personal environment preferences. We should ignore these personal development environment preferences to be ignored using your global `.gitignore` file and leave the project `.gitignore` file as clean as possible, that is, only containing the project specific rules.
You can create a `.gitignore_global` file with rules that will apply to all your repositories with:
```bash
touch ~/.gitignore_global
git config --global core.excludesfile ~/.gitignore_global
```
## 👌 Codely Code Quality Standards
Publishing this package we are committing ourselves to the following code quality standards:
- 🤝 Respect **Semantic Versioning**: No breaking changes in patch or minor versions
- 🤏 No surprises in transitive dependencies: Use the **bare minimum dependencies** needed to meet the purpose
- 🎯 **One specific purpose** to meet without having to carry a bunch of unnecessary other utilities
- ✅ **Tests** as documentation and usage examples
- 📖 **Well documented ReadMe** showing how to install and use
- ⚖️ **License favoring Open Source** and collaboration
## 🔀 Related information
This application was generated using the [<⚡⚛️> Vite React Best Practices Template](https://github.com/CodelyTV/vite-react_best_practices-template). Feel free to check it out and star the repo! 🌟😊🙌