Vite React - Boilerplate

Boilerplate for projects using Vite with react.

Summary

• What is used
• Configuration
  • Environment variables
    • Environment variables development
    • Environment variables production
  • Commands
• Flow development
• Flow production

What is used

• ReactJS
• Redux
• Redux Toolkit
• Styled Components
• React Testing Library
• Vitest
• Storybook
• Eslint
• Prettier
• Husky
• Lint-Staged
• Plop

Configuration

Environment variables

To use environment variables we follow the Vite recommended model.

Obs: These files are included in .gitignore

Environment variables development

Type the following command in your terminal to copy the example file and rename it to .env.development.local:

cp .env-example .env.development.local

Local variables:

REACT_ENVIRONMENT = 'DEVELOPMENT'

Environment variables production

Type the following command in your terminal to copy the example file and rename it to .env:

cp .env-example .env

Production values:

REACT_ENVIRONMENT = 'PRODUCTION'

Commands

• dev:app: run the application on http://localhost:5173/
• build:app: build for production
• preview:app: build for production and start a local server http://localhost:4173/
• lint: runs the linter in all components and pages
• format: runs prettier to format all components and pages
• test: runs vitest in watch mode
• test:coverage: runs vitest with coverage table
• generate: runs plop to generate component files
• storybook: runs storybook on http://localhost:6006/
• storybook:build: create the production build of storybook

Flow for development

1. Run the yarn generate command and fill in the options
2. Start the yarn dev:app command

Flow for production

1. Run the yarn preview:app command
2. Publish the files