A Step-by-Step Guide to Moving Your React Project from CRA to Vite

If you've come across statements like "Create React App is no longer recommended in 2023," or "The React team advises against using Create React App," you may be considering switching to Vite for your project. In this article, we'll guide you through the process of migrating your existing codebase from Create React App to Vite.

Creating a Vite Project

Create a new folder in your desired location for this project, and navigate to it using the terminal.

# Create a folder named project and change directory to that folder
mkdir project
cd project

Using npm or yarn run one of the commands below to create a Vite project inside the folder you are currently in.

# Create a vite project in the current directory
npm create vite@latest . -- --template react
yarn create vite . --template react

If you want to create a vite project in a new folder you can use this command below.

# Create a vite project in a new folder called "project"
npm create vite@latest project -- --template react
yarn create vite project --template react

Setting up your project

Run the following commands to install the necessary dependencies and start the development server

npm install
npm run dev

After running these commands you should see that the dev server has started

If you've done everything right, navigating to the URL provided in your terminal or http://localhost:5173 should show you this

PS: If you face any errors see https://vitejs.dev/guide to ensure you're doing everything right.

Moving Files

You'll have to move all files from your src folder in your Create React App Project to your new Vite Project src folder.

You can do this by simply copying them from your old folder to your new folder.

First, you'll need to install all the dependencies/packages from your old project. Take a look at the dependencies in the package.json below and identify which ones you need to add.

{
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }
}

Dependencies object in Create React App package.json

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.9"
  }

Dependencies and devDependencies object in Vite's package.json

If you are not sure of what to add you can use this prompt in ChatGPT "I have two package.json dependencies objects the first one is for a create react app and the second for a vite app identify the missing dependencies from the create react app and list them out and also give me the command to install them using 'npm i'
[First Package.json] [Second Package.json]"
NB: This command is specific to just the dependencies and devdependencies copying your entire package.json might cause other issues.

From this I know that I need to install axios and react-router-dom (These are the only two packages I installed manually so these are the ones I'll reinstall)

npm i axios react-router-dom

After installing the necessary packages/dependencies, you need to copy the items in the src folder.

src folder Create React App Project

src folder Vite Project

Copy all files and folders in the /src folder besides the index.js and paste in your Vite Project folder then rename each .js file to .jsx.
NB: Only files that have jsx in it need to be renamed no need to rename files with json data or any other JavaScript

Restart the development server up again using "npm run dev" (This isn't necessary I just do this for Peace of Mind)

npm run dev

If done correctly you should see your old project now successfully running with Vite.

Pro Tip: If you had git initialized in that project you can just copy your .git folder to the new one and then run

git add .
git commit -m commit_msg