Home

Awesome

Create React App Vite Typecheck Test Build Lint

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!

This is a Vite template top of the official Vite react-ts 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!

All npm package are keeping least release version powered by Dependabot.

Installation

npx degit laststance/create-react-app-vite myapp

pnpm

cd myapp
pnpm install
pnpm validate
pnpm start

If you don't need TailwindCSS, run pnpm remove:tailwind after npm installed.

Commands

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

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 Dan Abramov 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):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="http://ryota-murakami.github.io/"><img src="https://avatars1.githubusercontent.com/u/5501268?s=400&u=7bf6b1580b95930980af2588ef0057f3e9ec1ff8&v=4?s=100" width="100px;" alt="ryota-murakami"/><br /><sub><b>ryota-murakami</b></sub></a><br /><a href="https://github.com/laststance/create-react-app-vite/commits?author=ryota-murakami" title="Code">💻</a> <a href="https://github.com/laststance/create-react-app-vite/commits?author=ryota-murakami" title="Documentation">📖</a> <a href="https://github.com/laststance/create-react-app-vite/commits?author=ryota-murakami" title="Tests">⚠️</a></td> <td align="center" valign="top" width="14.28%"><a href="https://hung.dev"><img src="https://avatars.githubusercontent.com/u/8603085?v=4?s=100" width="100px;" alt="Hung Viet Nguyen"/><br /><sub><b>Hung Viet Nguyen</b></sub></a><br /><a href="https://github.com/laststance/create-react-app-vite/commits?author=nvh95" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/shayc"><img src="https://avatars.githubusercontent.com/u/6969966?v=4?s=100" width="100px;" alt="Shay Cojocaru"/><br /><sub><b>Shay Cojocaru</b></sub></a><br /><a href="https://github.com/laststance/create-react-app-vite/commits?author=shayc" title="Documentation">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/NateAGeek"><img src="https://avatars.githubusercontent.com/u/1813055?v=4?s=100" width="100px;" alt="NateAGeek"/><br /><sub><b>NateAGeek</b></sub></a><br /><a href="https://github.com/laststance/create-react-app-vite/issues?q=author%3ANateAGeek" title="Bug reports">🐛</a></td> </tr> </tbody> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->

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