Converting React or Svelte project from Parcel to Vite

Create a new Vite project

pnpm create vite@latest --template [react-swc|react|svelte] myapp
cd myapp

Copy over /src/

Delete files from src/* of the new project except for main.jsx and vite-env.d.ts.

If the main app is not src/App.jsx, rename the import in src/main.jsx to the correct file.

Delete following line from src/main.jsx

import './index.css'

Rename .js with JSX to .jsx

If original files are .js, rename to .jsx if they contain JSX.

Copy and update static files

Copy old favicon into public/, and remove public/vite.svg. All other static files can go in here as well.

Update ./index.html with current <title>, change <link rel="icon" type="image/svg+xml" href="/vite.svg" /> to point to the correct favicon, and type. SVG should be type: image/svg+xml and PNG should be type image/png.

Remove ./src/index.html which may exist from your old project, we use ./index.html for Vite.

Update vite.config.js

Add to vite.config.js,

base: './',
define: {
    global: {},
},

For a more detailed Vite config for React with support for .env files in the config file, and a proxy for a back end proxy, I use:

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

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  // https://vitejs.dev/config/#using-environment-variables-in-config
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
  const env = loadEnv(mode, process.cwd(), '');

  return {
    plugins: [react()],
    base: './',

    // https://vitejs.dev/config/shared-options.html#define
    // Define global constant replacements. Entries will be defined as globals during dev and statically replaced during build.
    define: {
      // global: {},
      __API_PORT__: env.VITE_API_PORT || 4000,
    },

    // https://vitejs.dev/config/server-options.html
    server: {
      // proxy to back end API server
      proxy: {
        '/api': {
          target: `http://localhost:${env.VITE_API_PORT}`,
          changeOrigin: true,
        },
        '/admin/docs': {
          target: `http://localhost:${env.VITE_API_PORT}`,
          changeOrigin: true,
        },
      },
    },
  };
});

Copy and update other project files

Copy any other dot files that might be needed, e.g prettier configs, README, LICENSE etc. Some dot files e.g .prettierrc.js may need to be renamed to .prettierrc.cjs.

Update .gitignore if needed.

Install packages

Install required packages via CLI or add entries to package.json.

Install sass if you use SASS or SCSS.

Install packages and run dev server

pnpm i
pnpm dev

Build files into dist/

pnpm build

Copy over .git dir.

Commit changes to Git repo.