{"id":19560415,"url":"https://github.com/codelytv/cra-template-codely","last_synced_at":"2025-04-06T01:06:15.447Z","repository":{"id":63442029,"uuid":"546694529","full_name":"CodelyTV/cra-template-codely","owner":"CodelyTV","description":"\u003c🌱⚛️\u003e Create React App Codely template","archived":false,"fork":false,"pushed_at":"2022-12-27T10:18:13.000Z","size":179,"stargazers_count":337,"open_issues_count":0,"forks_count":13,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-30T00:06:21.177Z","etag":null,"topics":["cra","create-react-app","react","reactjs"],"latest_commit_sha":null,"homepage":"https://codely.com","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}},"created_at":"2022-10-06T13:48:46.000Z","updated_at":"2025-02-19T18:35:13.000Z","dependencies_parsed_at":"2023-01-31T03:00:28.333Z","dependency_job_id":null,"html_url":"https://github.com/CodelyTV/cra-template-codely","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"CodelyTV/typescript-web-skeleton","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelyTV%2Fcra-template-codely","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelyTV%2Fcra-template-codely/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelyTV%2Fcra-template-codely/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelyTV%2Fcra-template-codely/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodelyTV","download_url":"https://codeload.github.com/CodelyTV/cra-template-codely/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247419859,"owners_count":20936012,"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","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":["cra","create-react-app","react","reactjs"],"created_at":"2024-11-11T05:07:29.706Z","updated_at":"2025-04-06T01:06:15.424Z","avatar_url":"https://github.com/CodelyTV.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"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 Create React App Codely template\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/CodelyTV/cra-template-codely/actions/workflows/ci.yml\"\u003e\u003cimg src=\"https://github.com/CodelyTV/cra-template-codely/actions/workflows/ci.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=\"CodelyTV Courses\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Template for creating your 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/cra-template-codely/stargazers\"\u003eStars are welcome 😊\u003c/a\u003e\n\u003c/p\u003e\n\n## 🚀 Using this CRA template\n\n### 🤔 CRA introduction\n\nReact officially support to create your custom templates for the Create React App (CRA) utility.\n\nThis Codely template is just a way to optimize even more the default CRA template adding the bare minimum [features we consider necessary on every React project](https://github.com/CodelyTV/cra-template-codely#-template-features).\n\n### ⚡ How to create your React app\n\nCreate your React app with TypeScript and taking advantage of the scaffolding provided by this template executing this `npx` command in your terminal:\n\n```bash\nnpx create-react-app my-app --template @codelytv/cra-template-codely\n```\n\nOr, if you prefer to use Yarn instead of npm: \n\n```bash\nyarn create react-app --template @codelytv/cra-template-codely my-app\n```\n\nIt will create a `my-app` folder inside the directory where you execute the command. You will find a `README.md` in the root of your generated project with the instructions on how to build, test, and run your application 🤟\n\n### 🌩️ What does CRA do while creating the project\n\nThe `my-app` created with the `npx` command will contain a ready-to-use application thanks to the magic CRA does behind the scenes:\n\n- Copy everything inside [this CRA `template` folder](template) into your project root directory\n- Create the project `package.json` based on the dependencies that CRA needs such as React itself _in the latest version possible_, plus the dependencies added by Codely in the [`template.json`](template.json)\n- Create the project `.gitignore` file based on the [`template/gitignore`](template/gitignore)\n- Depending on if you have used Yarn or npm while creating the project, it will have available the corresponding commands and config files in order to run the generated app\n- Install all the dependencies\n\n## 🌈 Template Features\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/cra-template-codely/blob/main/template/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\n## 💻 Improving this CRA template\n\nYou can improve this CRA and make Pull Requests to this repository. In order to locally test how your improvements generate a new project, you can specify a local template file with the following command:\n\n```bash\nnpx create-react-app my-app --template file:../path/to/cra-template-codely\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 templates\n\nOpinionated TypeScript skeletons ready for different purposes:\n\n- [🔷🌱 TypeScript Basic Skeleton](https://github.com/CodelyTV/typescript-basic-skeleton)\n- [🔷🕸️ TypeScript Web Skeleton](https://github.com/CodelyTV/typescript-web-skeleton)\n- [🔷🌍 TypeScript API Skeleton](https://github.com/CodelyTV/typescript-api-skeleton)\n- [🔷✨ TypeScript DDD Skeleton](https://github.com/CodelyTV/typescript-ddd-skeleton)\n\nThis same skeleton philosophy implemented in other programming languages:\n\n- [✨ JavaScript Basic Skeleton](https://github.com/CodelyTV/javascript-basic-skeleton)\n- [☕ Java Basic Skeleton](https://github.com/CodelyTV/java-basic-skeleton)\n- [📍 Kotlin Basic Skeleton](https://github.com/CodelyTV/kotlin-basic-skeleton)\n- [🧬 Scala Basic Skeleton](https://github.com/CodelyTV/scala-basic-skeleton)\n- [🦈 C# Basic Skeleton](https://github.com/CodelyTV/csharp-basic-skeleton)\n- [🐘 PHP Basic Skeleton](https://github.com/CodelyTV/php-basic-skeleton)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelytv%2Fcra-template-codely","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodelytv%2Fcra-template-codely","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelytv%2Fcra-template-codely/lists"}