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

This same skeleton philosophy implemented in other programming languages:

CodelyTV/cra-template-codely