A quick migration guide to Vite from Create React App, because (apart from Next.js) Vite is the natural successor of CRA for creating a modern React application as SPA .
First, install Vite and all React related libraries (here: Viteâs React Plugin) as development dependencies:
Second, uninstall create-react-appâs dependency:
Third, adjust your package.json to use the following new scripts:
Fourth, rename all extensions of files which are using JSX from â.jsâ to â.jsxâ, because Vite is explicit with file extensions. If you are using TypeScript, perform the same task from â.tsâ to â.tsxâ. The following demonstrates it with the App.js file on the command line:
If you are not renaming all your React/JSX related files this way, essentially all files that are using angle brackets, you may get the following or a similar error:
Fifth, create a vite.config.js file in your Vite + React projectâs root directory:
And add the following implementation details to it. Essentially we want to keep the same output directory for the build as we had before with create-react-app. In addition, we want to use Viteâs React Plugin:
Sixth, move the public/index.html into the projectâs root folder, because Vite expects it there:
Afterward, remove all %PUBLIC_URL% occurrences in the index.html file.
Last, link the src/index.js file in your moved index.html file the following way:
Thatâs it. If you have been using a create-react-app project without any further configuration (e.g. a fresh create-react-app installation), you are ready to start your new Vite based React application with npm start .
However, there may be additional steps needed which I want to outline next in case your create-react-app uses more configurations.
Thatâs essentially it from my side. If you happen to know any other essential troubleshooting hints, let me know!