Member-only story
Migrating from CRA (create-react-app) to Vite
2 min readDec 2, 2024
Migration steps
These migration steps assume that we have a CRA project with Typescript.
Step 1 — Removing CRA
The first step is to uninstall create-react-app from your project.
npm uninstall react-scriptsStep 2 — Installing Vite dependencies
Next, install the required dependencies for Vite.
npm install vite @vitejs/plugin-react-swc vite-tsconfig-paths vite-plugin-svgrNote: Depending on your specific needs, you can choose a different plugin from the official Vite plugins documentation.
Step 3 — Moving index.html
create-react-app uses public/index.html as the default entry point, while Vite looks for index.html at the root level. To make the transition, move your index.html to the root directory and update the script tag accordingly.
<!-- index.html -->
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div><script type="module" src="/src/index.tsx"></script>
</body>Step 4 — Adding vite.config.ts
Create a vite.config.ts file at the root of your project with the following content:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'//…
