Skip to content

rafamoliv/boilerplate-vite-react

Repository files navigation

A logo vite and react



Vite React - Boilerplate

Boilerplate for projects using Vite with react.

Summary

What is used

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