Refaelbenzvi24/Viterect-vite-react-boilerplate

Vite React Starter Template

Documentation

Description

This is a boilerplate/template I built from scratch with a lot of usefull tools configured and ready to use.
So if you wanna start a new project and don't want to waste time on configuration and figure out how to set it all up,
just clone and start to code! 😉

Features

• pnpm
• Vite
• React
• ESBuild
• tailwindcss
  • on-demand CSS utilities
• DaisyUI
• axios
• TypeScript
• File based routing
• PWA
• 😃Use icons from any icons sets - 🔍Browse icons here
• Markdown support
• 📥 APIs auto importing
• Unit testing with Jest, E2E Testing with Cypress.
• i18n ready with YAML
• State management:
  • form state with Formik, and xState for more complex ones.
  • UI State with Recoil
  • Server cache states with React Query
  • Immer for mutable state.
• Dark Mode - support toggle dark mode
• Deploy to GCloud App Engine with GitHub Actions(CICD)

Getting Started

Viterect requires Node >= 14

Create a repo from this template on GitHub.

or

clone the repo git clone git@github.com:Refaelbenzvi24/Viterect.git my-viterect-app \ npx degit refaelbenzvi24/viterect my-viterect-app

then

cd my-viterect-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

Before you start coding

When you use this template, try follow the checklist to update your info properly

• Modify or delete the LICENSE file.
• Change VITE_APP_NAME in the .env file.
• Change the favicon in public
• If you don't plan to use GitHub Actions, delete the .github directory.
• Clean up the READMEs and remove routes
• Change the name field in package.json.

And, enjoy :)

Scripts

• pnpm start - build and start production server
• pnpm start:test - build and start production server in test mode.
• pnpm build - build for production. The generated files will be on the dist folder.
• pnpm build:test - build for testing. The generated files will be on the tests/dist folder.
• pnpm serve - locally start the production build.
• pnpm serve:test - locally start the testing build.
• pnpm clean - clean build directory
• pnpm commit - commit using commitizen
• pnpm dev - start a development server with hot reload.
• pnpm dev:test - start a development server with hot reload in test mode - used for running cypress tests with coverage.
• extract-translations - extract translations from source files using i18next. configuration file for this is on i18next-parser.config.js. The generated files will be on the public/locales folder.
• pnpm prepare:husky - install husky.
• pnpm lint - runs TypeScript and ESLint.
• pnpm lint:eslint - runs ESLint.
• pnpm lint:tsc - runs TypeScript.
• pnpm test - run unit tests.
• pnpm test:ci - run all unit and integration tests in CI mode.
• pnpm test:e2e - run all e2e tests with the Cypress Test Runner.
• pnpm test:e2e:headless - run all e2e tests headlessly.
• pnpm test:e2e:ci - run all e2e tests for CI Environment.
• pnpm coverage:jest - open the coverage report in the browser for jest.
• pnpm coverage:cypress - open the coverage report in the browser for cypress.
• pnpm validate - runs lint, test:ci and test:e2e:ci.

Deploy to GCloud

Setup

Generate a service account key copy the whole file object content to the GitHub secrets with the key PROJECT_GCP_KEY and the project id to PROJECT_GCP_ID,

Deployment

Every push to the master/main branch will trigger a deployment to GCloud.