/cra-template-codely

<πŸŒ±βš›οΈ> Create React App Codely template

Primary LanguageSCSSMIT LicenseMIT

Codely logo

<πŸŒ±βš›οΈ> Create React App Codely template

Build status Codely Open Source CodelyTV Courses

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

πŸ’» 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: