fdaciuk/boilerplate-vite-react

Create a new project with React.js, TypeScript and jest with Vite

Boilerplate React.js + TypeScript + Vite 👋

Boilerplate to create React.js apps with Vite

Which techs this boilerplate have in it?

This boilerplate is ready to be used by devs who want to start a new project using React.js, TypeScript and Jest with Vite.

Main configurations

• React.js 18+ with TypeScript;
  • You can import "svgs" with import { ReactComponent as MyIcon } from './icon-path.svg';
  • You can import any other media (images, videos, etc) that is located inside src directory;
  • You can use absolute imports, using @ as src directory;
• Eslint:
  • Standard with some modifications;
  • React Hooks and other React configurations with eslint-config-react-app (same used in Create React App);
• Automatic lint and type-checking with Husky before every commit.

Usage

Install the dependencies:

yarn install

Run dev server:

yarn dev

You can run type-checking in watch mode in another terminal, if you may:

yarn type-check --watch

Run tests

yarn test

Production version

To generate the production version, you can run:

yarn build

All files you have to deploy will be located at the dist directory.

Run production version locally

To check if everything will be ok in production before the deployment, you can run this command after yarn build:

yarn preview

Author

👤 Fernando Daciuk

• Website: https://daciuk.dev
• Twitter: @fdaciuk
• Github: @fdaciuk
• LinkedIn: @fdaciuk
• Instagram : @fdaciuk

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

✨ Contributors

Thanks goes to these wonderful people (emoji key):

Fernando Daciuk 💻 📖

Gabriel Pinheiro 💻

NewCapital.in 💻

Vinícius Bispo 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator

boilerplate-vite-react's Issues

Template repository

Enable the repository to be used as a template repository.
How to enable: https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template

Fix Vite Plugin Lint package

After cloning the project and running yarn install or yarn update-deps, the installation failed due to the vite-plugin-lint package. This prevents users from using the boilerplate without removing the package.

Import pattern

Remove default of export in app.tsx for follow the pattern of importation, and import named import { App } from
Explaining:
When exporting by default can't change the name's component in importation, then, if change the name in component should be changed in importation too, however, if export without default, you can change the name of importation component facilitating a refactoring of code.
Explained in class: 05/20