Migrate to Vite from Create React App (CRA)

Click for: original source

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. By Robin Wieruch.

"scripts": {
  "start": "vite",
  "build": "vite build",
  "serve": "vite preview"
},

The article then guides you through all the necessary steps:

  • Install Vite and all React related libraries (here: Vite’s React Plugin) as development dependencies
  • Uninstall create-react-app’s dependency
  • Adjust your package.json to use the following new scripts
  • Rename all extensions of files which are using JSX from “.js” to “.jsx”
  • Create a vite.config.js file in your Vite + React project’s root directory
  • Move the public/index.html into the project’s root folder, because Vite expects it there
  • Remove all %PUBLIC_URL% occurrences in the index.html file
  • Last, link the src/index.js file in your moved index.html file

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. Good read!

[Read More]

Tags web-development app-development react javascript