Setup of a standard SPA React project.
- Update packages with npm-check-updates
- Read packages.json and see what is included.
- Read the rest of README.md
- Add your stuff now (˶ᵔ ᵕ ᵔ˶)
Make sure you are using the specified version of Node.js in .nvmrc and you have enabled corepack, you can do this via corepack enable command.
Use command pnpm dev.
Use command pnpm build.
Project has configured eslint and prettier. To check the errors/warnings use command pnpm lint, and to fix auto-fixable errors use pnpm fix.
Make sure to include lint stage in CI step before building.
This template has simple Dockerfile that will build the project and serve the statics under port 80 via nginx.
Configured package manager pnpm it will be automatically installed if you enable corepack.
To update the version of the pnpm simply use corepack use pnpm@<desired_version>
Sass SCSS variant used for writing CSS.
This project template configures vite so the prefix.scss is always prefixed for every processed SCSS file, this speeds up development making all helpful mixins and utils available in all files without thinking about importing them to every single style.scss .
Breakpoints are configured in bootstrap.scss .
Write a proper selectors and name classes/ids well ◕⩊◕.
- zod Schema validation for Typescript.
- react-hook-form The best way to write forms with react. (Recommended to use with zod)
- zustand Simple yet powerful global state.
- react-tracked Elegant and efficient way to use native context and more.
- clsx Great utility for dynamic assignment of className.
- floating-ui Everything "floating", tooltips, popovers etc. Great successor of "popper.js".
- tanstack-router Routing for React apps with awesome automatic types generation.
- tanstack-query Async operations helper for react components, allows to skip most of the hassle in implementing async state changes in components.
- tanstack-virtual Implementing DOM virtualization was never easier.
- typesafe-i18n i18n Translations with automatic type generation.