How to migrate a React app from Parcel to Vite

remarkablemark
2 min readNov 6, 2023

--

This article goes over how to migrate a React app from Parcel to Vite.

Dependencies

Uninstall parcel dependencies:

npm uninstall @parcel/packager-raw-url @parcel/transformer-webmanifest parcel

Install vite dependencies:

npm install --save-dev @vitejs/plugin-react-swc vite

package.json

Remove source and update scripts:

-  "source": "public/index.html",
"scripts": {
- "build": "parcel build",
+ "build": "vite build",
- "clean": "rm -rf .parcel-cache dist",
+ "clean": "rm -rf dist",
+ "preview": "vite preview",
- "start": "parcel --open",
+ "start": "vite --open",

.gitignore

Remove .parcel-cache:

-/.parcel-cache

index.html

Move index.html to the root:

mv public/index.html index.html

vite.config.ts

Add vite config:

touch vite.config.ts
import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';

export default defineConfig({
plugins: [react()],
});

Path alias

Replace tilde specifiers in JavaScript source files:

-import '~/src/utils';
+import 'src/utils';

Then update vite.config.ts:

 import react from '@vitejs/plugin-react-swc';
+import { resolve } from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
+ resolve: {
+ alias: {
+ src: resolve(__dirname, 'src'),
+ },
+ },
plugins: [react()],
});

Update tsconfig.json:

     "paths": {
- "~*": ["./*"]
+ "src/*": ["./src/*"],
}

And update jest.config.ts:

   moduleNameMapper: {
- '^~(.*)$': '<rootDir>/$1',
+ '^src/(.*)$': '<rootDir>/src/$1',

Port

Replace localhost:1234 with localhost:5173:

git grep -l "localhost:1234" | xargs sed -i "" -e "s/localhost:1234/localhost:5173/g"

CI

Pass argument --host when starting a server in GitHub Actions:

npx vite --host

Examples

--

--