This is a boilerplate repo that can be used to scaffold React web apps.
The tech stack that the boilerplate uses is:
Core:
- Vite
- React (+ React Router)
- TypeScript
- TailwindCSS
Extras:
- Vitest
- React Testing Library
- Storybook
- React Query
- Axios
- React Helmet
- Utils (
lodash-es,date-fnsetc...)
It comes with sensible defaults for code structure and libraries being used, but there'll be some code pieces that you can safely remove and/or change, depending on your use-case.
npm run dev- Start Vite development server
npm run build- Build application for production
npm run preview- Preview production build locally (never use this to run your application in production)
npm run typecheck- Runs TypeScript compiler to check for any type errors
npm run typecheck:watch- Runs TypeScript compiler to check for any type errors - will keep running and watch for file changes (useful during development)
npm run test- Runs all tests in watch mode
npm run test:ci- Runs all tests. Useful for running in CI/CD environments, as the name suggests :)
npm run validate:lint- Run
eslinton whole codebase to check for linting issues
npm run validate:typecheck- Alias to
typecheck
npm run validate:build- Alias to
build
npm run validate:test- Alias to
test:ci
npm run validate:formatting- Checks if the codebase is properly formatted according to the Prettier configuration
npm run format- Formats the whole codebase based on the Prettier configuration
npm run validate- Runs all scripts starting with
validate:in parallel. Useful for ensuring your codebase is in a good shape
npm run storybook- Start Storybook development server
npm run storybook:build- Build Storybook for production
First, run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.
Vite will watch all your source files and re-compile them as you develop, also providing HMR.
Vite development server (npm run dev) does NOT check for errors by default (see: Transpile Only | Vite). It assumes type checking is taken care of by your IDE and build process.
This can make it harder to catch TS errors during development. To solve this, there is a script that you can run besides npm run dev to check for TS errors as you develop:
npm run typecheck:watchThe recommended and optimal way to develop is to have both npm run dev and npm run typecheck:watch running at the same time.
To deploy your app to production, run npm run build and the contents of the generated dist folder to any HTTP server.
The recommended way to deploy and host your web app is through Netlify.
To preview how your app would look like and behave when deployed to a server, you can run:
npm run build && npm run previewand open http://localhost:4173 in your preferred browser.
Important: never use npm run preview to run your app in a production environment.
Absolute imports are configured for both source code and for tests by default. This means you can do:
import { someModule } from '@/utils/some-module.util.ts';in both your source and your test files.
Note: @ resolves to the src folder.