How to migrate from Parcel to Vite

2 min readJan 3, 2024
Parcel and Vite logos
Parcel + Vite

This article 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 “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 the Vite server in CI, you’ll need to pass the --host option:

npx vite --host