Vite JS React Minimal Template

This is a minimal template for React applications using Vite JS. It is a template that can be used as a starting point for small projects.

Prerequisites

Before you begin, ensure you have met the following requirements:

• You have installed the latest version of Node.js
• You have installed the latest version of Yarn

Installation and Setup

To install and setup the project, follow these steps:

Use degit to scaffold your project based on this template.

npx degit josenaldo/vite-js-react-minimal my-project

Where my-project is the name of your project.

Go to the project directory.

cd my-project

Install all dependencies of the project. Must be run once before other scripts, right after the clone or download.

yarn install

After installing all dependencies, you must configure the environment variables. You can use the .env.example file as a template.

cp .env.example .env

Scripts

Dev

The page will reload when you make changes. You may also see any lint errors in the console.

Run the application in development mode.

yarn dev

After running the application in development mode, you can access the application via the following URL:

• http://localhost:PORT

Where PORT is the port configured in the .env file. The default port is 3000.

Build

Builds the application for production to the dist folder.

yarn build

Preview

Runs the application in production mode.

yarn preview

Lint

Runs the ESLint linter on the source code files with .js and .jsx, extensions located in the src directory.

yarn lint

Runs the ESLint linter on the source code files with .js, and .jsx, extensions located in the src directory and automatically fix any fixable problems.

yarn lint:fix

Deploy

Deploy the application to the production environment.

yarn deploy

Test

Runs the Jest test runner on the source code files with .test.js and .test.jsx, extensions located in the src directory.

yarn test

Runs the Jest test runner on the source code files with .test.js and .test.jsx, extensions located in the src directory and watch for changes.

yarn test:watch

Runs the Jest test runner on the source code files with .test.js and .test.jsx, extensions located in the src directory and generate a coverage report.

yarn test:coverage

Runs Cypress E2E tests, located in the cypress directory.

yarn test:e2e

Open the Cypress Test Runner.

yarn cypress:open

Technologies

This project uses the following technologies:

Dependencies

• axios
  • A promise-based HTTP client for the browser and Node.js.
• date-fns
  • A lightweight JavaScript library for parsing, validating, manipulating, and formatting dates.
• date-fns-tz
  • A date-fns plugin for supporting time zones.
• prop-types
  • Runtime type checking for React props.
• React
  • A JavaScript library for building user interfaces.
• React DOM
  • A package for working with the DOM in React.
• Redux
  • A predictable state container for JavaScript apps.

Dev Dependencies

• @testing-library/jest-dom
  • Custom Jest matchers to test the state of the DOM.
• @testing-library/react
  • A library for testing React components.
• @testing-library/user-event
  • A library for simulating user events in testing.
• @types/react
  • TypeScript type definitions for React.
• @types/react-dom
  • TypeScript type definitions for React DOM.
• @vitejs/plugin-react
  • Vite plugin for using React in a Vite project.
• cypress
  • A JavaScript end-to-end testing framework.
• eslint
  • A pluggable and configurable linter tool for identifying and reporting patterns in JavaScript.
• eslint-config-prettier
  • A configuration for disabling ESLint rules that conflict with Prettier.
• eslint-plugin-cypress
  • ESLint rules for Cypress.
• eslint-plugin-jest
  • ESLint plugin for Jest.
• eslint-plugin-react
  • React specific linting rules for ESLint.
• Vite
  • A build tool that aims to provide a faster and leaner development experience for modern web projects.
• vite-plugin-eslint
  • A Vite plugin for running ESLint during development.

Author

👤 Josenaldo de Oliveira Matos Filho

• Website: <josenaldo.github.io>
• Twitter: @josenaldomatos
• Github: @josenaldo
• LinkedIn: @josenaldo

License

This project is licensed under the MIT License - see the LICENSE file for details.

Show your support

Give a ⭐️ if this project helped you!

---

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