Template for creating React apps with TypeScript following best practices: Unit and end-to-end tests, Continuous Integration, and linting.
Stars are welcome 😊
- Create your project based on this template:
- a) If you want to create a GitHub repository, we would recommend to use the GitHub "Use this template" button and clone your newly created repository
- b) If you prefer to just create a local project, you can use degit:
npx degit CodelyTV/vite-react_best_practices-template#main my-app
- Update your project meta-information:
- Update the
package.json:- Specify proper values for the
name,authorandlicenseproperties - Remove the
privateproperty if you plan to publish the app as a npm package
- Specify proper values for the
- Change the author in
LICENSE - Change the title in
index.html - Replace the favicon in the
publicdirectory - Clean up this
README.md
- Update the
- Run your app:
cd my-app: Move to your project root directorynpm install: Install all the project dependenciesnpm start: Start the development server on localhost:3000
npm run test: Run unit tests with Jest and React Testing Library
npm start: Start the development server on localhost:3000- Run end-to-end tests with Cypress choosing one of the following options:
npm run cy:open: Open Cypress in dev modenpm run cy:run: Execute Cypress in CLI
npm run lint: Run linternpm run lint:fix: Fix lint issues
- 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
React updated the official recommendation about how to start a new project. Previously, they recommended Create React App (CRA) and we did this very same template based on CRA, and right now they recommend to directly use a framework like Next.js, Remix, or Gatsby.
However, they also include an specific section in the official documentation on how to use React without a framework, and the recommended way is to use Vite or Parcel.
Even if not using a framework such as Next.js is something to double check, we are interested into having this template for use cases where you are not interested into the benefits of a complete framework. For instance, theses cases could be as simple as learning the React.js features and limitations in order to have a clear vision where React ends and a framework starts. This is something we do in our React video course.
These are folders created due to personal environment preferences. We should ignore these personal development environment preferences to be ignored using your global .gitignore file and leave the project .gitignore file as clean as possible, that is, only containing the project specific rules.
You can create a .gitignore_global file with rules that will apply to all your repositories with:
touch ~/.gitignore_global
git config --global core.excludesfile ~/.gitignore_globalPublishing 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
This application was generated using the <⚡⚛️> Vite React Best Practices Template. Feel free to check it out and star the repo! 🌟😊🙌