{"id":14069317,"url":"https://github.com/CodelyTV/typescript-react_best_practices-vite_template","last_synced_at":"2025-07-30T05:32:01.810Z","repository":{"id":166076740,"uuid":"620334952","full_name":"CodelyTV/typescript-react_best_practices-vite_template","owner":"CodelyTV","description":"\u003c⚡⚛️\u003e Start your React project with Vite following code best practices (TypeScript, Linting, testing, CI/CD…)","archived":false,"fork":false,"pushed_at":"2023-08-03T22:51:04.000Z","size":306,"stargazers_count":181,"open_issues_count":1,"forks_count":25,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-26T23:33:01.776Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://pro.codely.com/library/react-de-0-aplicando-buenas-practicas-192069/about/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodelyTV.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-03-28T13:34:15.000Z","updated_at":"2025-04-24T04:51:32.000Z","dependencies_parsed_at":"2024-01-07T18:07:25.561Z","dependency_job_id":"615bf46c-3db5-49d1-8147-b3ebff35ec23","html_url":"https://github.com/CodelyTV/typescript-react_best_practices-vite_template","commit_stats":null,"previous_names":["codelytv/typescript-react_best_practices-vite_template"],"tags_count":0,"template":true,"template_full_name":"CodelyTV/typescript-web-skeleton","purl":"pkg:github/CodelyTV/typescript-react_best_practices-vite_template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelyTV%2Ftypescript-react_best_practices-vite_template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelyTV%2Ftypescript-react_best_practices-vite_template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelyTV%2Ftypescript-react_best_practices-vite_template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelyTV%2Ftypescript-react_best_practices-vite_template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodelyTV","download_url":"https://codeload.github.com/CodelyTV/typescript-react_best_practices-vite_template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelyTV%2Ftypescript-react_best_practices-vite_template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267815187,"owners_count":24148356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-08-13T07:06:51.105Z","updated_at":"2025-07-30T05:32:01.439Z","avatar_url":"https://github.com/CodelyTV.png","language":"SCSS","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://codely.com\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/10558907/170513882-a09eee57-7765-4ca4-b2dd-3c2e061fdad0.png\" width=\"300px\" height=\"92px\" alt=\"Codely logo\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n  \u003c⚡⚛️\u003e Vite React Best Practices Template (by Codely)\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/CodelyTV/vite-react_best_practices-template/actions/workflows/tests.yml\"\u003e\u003cimg src=\"https://github.com/CodelyTV/vite-react_best_practices-template/actions/workflows/tests.yml/badge.svg\" alt=\"Build status\"/\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/CodelyTV\"\u003e\u003cimg src=\"https://img.shields.io/badge/CodelyTV-OS-green.svg?style=flat-square\" alt=\"Codely Open Source\"/\u003e\u003c/a\u003e\n    \u003ca href=\"https://pro.codely.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/CodelyTV-PRO-black.svg?style=flat-square\" alt=\"Codely Pro Courses\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Template for creating React apps with TypeScript following best practices: Unit and end-to-end tests, Continuous Integration, and linting.\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://github.com/CodelyTV/vite-react_best_practices-template/stargazers\"\u003eStars are welcome 😊\u003c/a\u003e\n\u003c/p\u003e\n\n## ⚡ Using this Vite template\n\n1. Create your project based on this template:\n   - 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\n   - b) If you prefer to just create a local project, you can use [degit](https://github.com/Rich-Harris/degit):\n     ```bash\n     npx degit CodelyTV/vite-react_best_practices-template#main my-app\n     ```\n2. Update your project meta-information:\n   - [ ] Update the [`package.json`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/package.json):\n     - [ ] Specify proper values for the `name`, `author` and `license` properties\n     - [ ] Remove the `private` property if you plan to publish the app as a npm package\n   - [ ] Change the author in [`LICENSE`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/LICENSE)\n   - [ ] Change the title in [`index.html`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/index.html)\n   - [ ] Replace the favicon in the [`public`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/public) directory\n   - [ ] Clean up this [`README.md`](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/README.md)\n3. Run your app:\n   1. `cd my-app`: Move to your project root directory\n   2. `npm install`: Install all the project dependencies\n   3. `npm start`: Start the development server on [localhost:3000](http://localhost:3000)\n\n## ✅ Testing\n\n### Unit tests\n\n`npm run test`: Run unit tests with Jest and React Testing Library\n\n### End-to-end tests\n\n1. `npm start`: Start the development server on [localhost:3000](http://localhost:3000)\n2. Run end-to-end tests with Cypress choosing one of the following options:\n  - `npm run cy:open`: Open Cypress in dev mode\n  - `npm run cy:run`: Execute Cypress in CLI\n\n## 🔦 Linting\n\n- `npm run lint`: Run linter\n- `npm run lint:fix`: Fix lint issues\n\n## 🌈 Tech Stack\n\n- [TypeScript](https://www.typescriptlang.org)\n- [ESLint](https://eslint.org) and [Prettier](https://prettier.io) already configured with the [🤏 Codely's configuration](https://github.com/CodelyTV/eslint-config-codely)\n- [Jest](https://jestjs.io) with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) for the unit tests\n- [Cypress](https://www.cypress.io) with [Testing Library](https://testing-library.com/docs/cypress-testing-library) for the end-to-end tests\n- [GitHub Action Workflows](https://github.com/features/actions) set up to run tests and linting on push\n- [Makefile](https://github.com/CodelyTV/vite-react_best_practices-template/blob/main/Makefile) for standardize how to run projects\n- [Sass](https://sass-lang.com) to supercharge CSS with nested classes and more fun\n- [.editorconfig](https://editorconfig.org) for sharing the IDE config\n\n## 🤔 FAQ\n\n### 🤷‍♂️ Why Vite and not Next.js, Remix, or Create React App\n\nReact 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.\n\nHowever, 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.\n\nEven 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/).\n\n### 👻 Why not adding `.vscode` or `.idea` to the `.gitignore` template\n\nThese 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.\n\nYou can create a `.gitignore_global` file with rules that will apply to all your repositories with:\n\n```bash\ntouch ~/.gitignore_global\ngit config --global core.excludesfile ~/.gitignore_global\n```\n\n## 👌 Codely Code Quality Standards\n\nPublishing this package we are committing ourselves to the following code quality standards:\n\n- 🤝 Respect **Semantic Versioning**: No breaking changes in patch or minor versions\n- 🤏 No surprises in transitive dependencies: Use the **bare minimum dependencies** needed to meet the purpose\n- 🎯 **One specific purpose** to meet without having to carry a bunch of unnecessary other utilities\n- ✅ **Tests** as documentation and usage examples\n- 📖 **Well documented ReadMe** showing how to install and use\n- ⚖️ **License favoring Open Source** and collaboration\n\n## 🔀 Related information\n\nThis application was generated using the [\u003c⚡⚛️\u003e Vite React Best Practices Template](https://github.com/CodelyTV/vite-react_best_practices-template). Feel free to check it out and star the repo! 🌟😊🙌\n","funding_links":[],"categories":["SCSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCodelyTV%2Ftypescript-react_best_practices-vite_template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCodelyTV%2Ftypescript-react_best_practices-vite_template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCodelyTV%2Ftypescript-react_best_practices-vite_template/lists"}