@codelytv/cra-template-codely v1.0.3
π 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: