How to migrate a React app from Parcel to Vite

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

• remarkablemark/mui-template#233

This article was originally published on remarkablemark.org on November 4, 2023.