Template for creating your React apps with TypeScript following best practices: Unit and end-to-end tests, Continuous Integration, and linting.
Stars are welcome 😊
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.
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 🤟
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
- 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
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-codelyPublishing 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
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: