<🌱⚛️> Create React App Codely template

Template for creating your React apps with TypeScript following best practices: Unit and end-to-end tests, Continuous Integration, and linting.




Stars are welcome 😊

🚀 Using this CRA template

$3

React officially support to create your custom templates for the Create React App (CRA) utility.

This 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.

$3

Create your React app with TypeScript and taking advantage of the scaffolding provided by this template executing this npx command in your terminal:

``bash
npx create-react-app my-app --template @codelytv/cra-template-codely
`

Or, if you prefer to use Yarn instead of npm:

`bash
yarn create react-app --template @codelytv/cra-template-codely my-app
`

It 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 🤟

$3

The my-app created with the npx command will contain a ready-to-use application thanks to the magic CRA does behind the scenes:

- Copy everything inside this CRA template folder into your project root directory
- 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
- Create the project .gitignore file based on the template/gitignore
- 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
- Install all the dependencies

🌈 Template Features

- TypeScript
- ESLint and Prettier already configured with the 🤏 Codely's configuration
- Jest with React Testing Library for the unit tests
- Cypress with Testing Library for the end-to-end tests
- GitHub Action Workflows set up to run tests and linting on push
- Makefile for standardize how to run projects
- Sass to supercharge CSS with nested classes and more fun
- .editorconfig for sharing the IDE config

💻 Improving this CRA template

You 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:

`bash
npx create-react-app my-app --template file:../path/to/cra-template-codely
``

👌 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 templates

Opinionated TypeScript skeletons ready for different purposes:

- 🔷🌱 TypeScript Basic Skeleton
- 🔷🕸️ TypeScript Web Skeleton
- 🔷🌍 TypeScript API Skeleton
- 🔷✨ TypeScript DDD Skeleton

This same skeleton philosophy implemented in other programming languages:

- ✨ JavaScript Basic Skeleton
- ☕ Java Basic Skeleton
- 📍 Kotlin Basic Skeleton
- 🧬 Scala Basic Skeleton
- 🦈 C# Basic Skeleton
- 🐘 PHP Basic Skeleton