How to migrate from Parcel to Vite

This post goes over how to migrate from Parcel to Vite.


Uninstall parcel:

npm uninstall parcel

Install vite:

npm install --save-dev vite

Remove “source” and update npm “scripts”:

-  "source": "public/index.html",
   "scripts": {
-    "build": "parcel build",
+    "build": "vite build",
+    "preview": "vite preview",
-    "start": "parcel --open"
+    "start": "vite --open"

Environment Variables

Environment variables need to be prefixed with VITE_. For example:


Replace process.env. with import.meta.env.VITE_:

git grep -l 'process.env.' | xargs sed -i '' -e 's/process.env./import.meta.env.VITE_/g'

Replace process.env.NODE_ENV checks with import.meta.env.DEV. For example:

-if (process.env.NODE_ENV === 'development') {
+if (import.meta.env.DEV) {

If you’re using TypeScript, create a type declaration file:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly DEV: boolean;
  readonly VITE_GOOGLE_ANALYTICS_ID: string;

interface ImportMeta {
  readonly env: ImportMetaEnv;


Move index.html to the root:

find . -type f -name index.html -print0 | xargs -0 -I {} mv {} $(git rev-parse --show-toplevel)

Update all scripts, links, and asset paths.


Create a vite.config.mjs if you’re using plugins. For example:

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

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


If you’re getting the error:

error TS2307: Cannot find module './file.png' or its corresponding type declarations.

Then update your type declaration file:

declare module '*.png' {
  const src: string;
  export default src;


Replace localhost:1234 with localhost:5173:

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


Update your environment variables with the VITE_ prefix.

If you’re using Parcel’s --public-url option, replace it with Vite’s --base:

git grep -l '\-\-public-url' | xargs sed -i '' -e 's/--public-url/--base/g'

If you’re running a Vite server in CI, then you’ll need to pass the --host option:

npx vite --host


Please support this site and join our Discord!