vite-react-ts-extended

My CRA alternative.
Create plain and lightweight React+TS programming environment with familiar pre-setup tooling
eslint/prettier, vitest/TS/react-testing-library/msw, tailwindcss, CI.

Try this Online!

This is the official Vite react-ts template(npm init vite@latest myapp -- --template react-ts) and some extended setup.

• eslint-typescript and Prettier integration. Rules are 100% my personal setup 💅
• Vitest, React Testing Library, MSW
• tailwindcss
• Github Actions

Installation

npx degit guitartsword/vitest-react-ts-extended myapp

pnpm

cd myapp
pnpm install
pnpm validate # The installation was successful if no error occurs after running 'validate'.
pnpm dev

npm

cd myapp
npm install
npm run validate # The installation was successful if no error occurs after running 'validate'.
npm run dev

Commands

pnpm dev            # start development server
pnpm validate       # run test,lint,build,typecheck concurrently
pnpm test           # run vitest without watch mode
pnpm test:ui        # run tests with ui (Really awesome)
pnpm test:watch     # run vitest in watch mode
pnpm lint           # run eslint
pnpm lint:fix       # run eslint with --fix option
pnpm typecheck      # run TypeScript compiler check
pnpm build          # build production bundle to 'dist' directly
pnpm prettier       # run prettier for json|yml|css|md|mdx files
pnpm clean          # remove 'node_modules' 'pnpm-lock.yaml' 'dist' completely
pnpm serve          # launch server for production bundle in local

Background

The evolution of the React framework is accelerating more than ever before.
Next.js, Remix, RedwoodJS, Gatsby, Blitz etc...

Ahthough I still need plain React programming starter some reason. (.e.g Demo, Experiment like Deep Dive React Core.)
So far, create-react-app was it.
In short, create-react-app development couldn't say active. Please read the Issue in details.

So I created an alternative to create-react-app for myself, based on Vite.
This project contains my very opinionted setup,
but I hope it will be a useful tool for people who have similar needs to mine! 😀

License

MIT

Contributors ✨

Thanks goes to these wonderful people (emoji key):

ryota-murakami 💻 📖 ⚠️

Hung Viet Nguyen 💻

Isaias Valle 💻

This project follows the all-contributors specification. Contributions of any kind welcome!