<🌱⚛️> 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

🤔 CRA introduction

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.

⚡ How to create your React app

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

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

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

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 🤟

🌩️ What does CRA do while creating the project

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:

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