Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/laststance/create-react-app-vite
Create React App Vite ⚛️
https://github.com/laststance/create-react-app-vite
create-react-app msw react react-testing-library tailwindcss typescirpt vite
Last synced: about 2 months ago
JSON representation
Create React App Vite ⚛️
- Host: GitHub
- URL: https://github.com/laststance/create-react-app-vite
- Owner: laststance
- License: mit
- Created: 2021-11-02T00:32:15.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T12:43:02.000Z (about 2 months ago)
- Last Synced: 2024-04-14T06:44:46.921Z (about 2 months ago)
- Topics: create-react-app, msw, react, react-testing-library, tailwindcss, typescirpt, vite
- Language: TypeScript
- Homepage:
- Size: 5.77 MB
- Stars: 113
- Watchers: 3
- Forks: 24
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- awesome-vite - create-react-app-vite - React, TypeScript, TailwindCSS, MSW, Vitest, React Testing Library, ESLint, Prettier, GitHub Actions. (Get Started / Templates)
- awesome-stars - create-react-app-vite
README
# Create React App Vite [](https://github.com/laststance/vite-react-ts-alter/actions/workflows/typecheck.yml) [](https://github.com/laststance/create-react-app-vite/actions/workflows/test.yml) [](https://github.com/laststance/create-react-app-vite/actions/workflows/build.yml) [](https://github.com/laststance/create-react-app-vite/actions/workflows/lint.yml)
> Simple CRA style Vite teimpate.
> Create plain and lightweight React+TS programming environment.
> And a easy migration base for create-react-app to Vite.
## [Try this Online!](https://codesandbox.io/p/github/laststance/create-react-app-vite/main?file=%2FREADME.md&workspace=%257B%2522activeFileId%2522%253A%2522clfgsr6q10016g2hjg3xq06lt%2522%252C%2522openFiles%2522%253A%255B%2522%252FREADME.md%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clfgsra1u000x3b6mbdjl3ahb%2522%253A%257B%2522key%2522%253A%2522clfgsra1u000x3b6mbdjl3ahb%2522%252C%2522name%2522%253A%2522Default%2522%252C%2522devtools%2522%253A%255B%257B%2522key%2522%253A%2522clfgsra1u000y3b6meoz3zcev%2522%252C%2522type%2522%253A%2522PROJECT_SETUP%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522key%2522%253A%2522clfgss4o700dz3b6mz869sru3%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522key%2522%253A%2522clfgss3ug00ba3b6mpaataz0k%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D%257D%252C%2522currentSpace%2522%253A%2522clfgsra1u000x3b6mbdjl3ahb%2522%252C%2522spacesOrder%2522%253A%255B%2522clfgsra1u000x3b6mbdjl3ahb%2522%255D%252C%2522hideCodeEditor%2522%253Afalse%257D)
This is a Vite template top of the official [Vite](https://vitejs.dev/) [react-ts](https://stackblitz.com/edit/vitejs-vite-is3dmk?file=index.html&terminal=dev) template(`npm init vite@latest myapp -- --template react-ts`) and some extended setup.
I'd like to keep CRA like experience as much as possible, So improving/adding feature Rull Request is really welcome!
- Support CRA's [Custom Environment Variables](https://create-react-app.dev/docs/adding-custom-environment-variables/) like `REACT_APP_`.
- [eslint-config-ts-prefixer](https://github.com/laststance/eslint-config-ts-prefixer). Specialized fixable(`--fix` option) rule sets. Zero extend any recommended for confortable DX.
- [Vitest](https://vitest.dev/), [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/), [MSW](https://mswjs.io/)
- [tailwindcss](https://tailwindcss.com/)
- [Github Actions](https://github.com/features/actions)
All npm package are keeping least release version powered by [Dependabot](https://github.com/dependabot).
# Installation
```
npx degit laststance/create-react-app-vite myapp
```
### npm
```sh
cd myapp
pnpm install
pnpm validate
pnpm start
```
If you don't need TailwindCSS, run `pnpm remove:tailwind` after npm installed.
### Commands
```sh
pnpm dev # start development server
pnpm start # start development server
pnpm validate # run test,lint,build,typecheck concurrently
pnpm test # run jest
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' 'yarn.lock' 'dist' completely
pnpm serve # launch server for production bundle in local
pnpm remove:tailwind # remove TailwindCSS
```
# CRA to Vite migration guides
- [Migrate to Vite from Create React App (CRA)](https://www.robinwieruch.de/vite-create-react-app/)
- [Migrating from Create React App (CRA) to Vite](https://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vite)
- [Migrating a Create React App (CRA) application to Vite](https://www.darraghoriordan.com/2021/05/16/migrating-from-create-react-app-to-vite)
# Background
Simply put, CRA development has stopped as of 2023.
This has sparked a discussion about replacing CRA with Vite for official documentation recommendations.
[Replace Create React App recommendation with Vite](https://github.com/reactjs/react.dev/pull/5487)
Dan Avramov offered some plans for the future of the CRA in his comments, but no direct answers were given.
https://github.com/reactjs/react.dev/pull/5487#issuecomment-1409720741
The React community is still buzzing around Server Component after May 2023, but there is still a high demand for the React SinglePageAplication starter that the CRA has served in the past, and I was one of the people who needed it, I was one of the people who needed it, so I decided to create a template in Vite that could be used as much as possible like CRA.
# License
MIT
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
ryota-murakami
💻 📖 ⚠️
Hung Viet Nguyen
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!