<🌱 ⚛️ > 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-codelyOr, if you prefer to use Yarn instead of npm:
yarn create react-app --template @codelytv/cra-template-codely my-appIt 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
templatefolder into your project root directory - Create the project
package.jsonbased on the dependencies that CRA needs such as React itself in the latest version possible, plus the dependencies added by Codely in thetemplate.json - Create the project
.gitignorefile based on thetemplate/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: