Skip to main content
Version: 2.x

Frontend Migration Changes

Overview​

Migrating from Create React App (CRA) to Vite brings significant improvements in development experience and build performance. This guide walks you through the migration process for the Data VIZ project.

Why Migrate?​

  • Faster Development Server: Vite's dev server starts instantly
  • Improved HMR: Hot Module Replacement is more reliable
  • Better Build Performance: Optimized production builds
  • Modern Architecture: Built on native ES modules

Migration Steps​

Dependencies to Remove​

  • react-scripts
  • @testing-library/jest-dom (if switching to Vitest)
  • web-vitals
  • craco (if using CRACO)
  • @craco/craco (if using CRACO)
  • node-sass (if using SASS with CRA. Vite has built-in support for SASS).
  • node-sass-chokidar (if using SASS with CRA)
  • connected-react-router (if using connected-react-router)
  • Old polyfills (if using CRA polyfills)
  • react < 18 (if already installed)
npm uninstall react-scripts @testing-library/jest-dom web-vitals node-sass node-sass-chokidar connected-react-router @craco/craco

You will also need to uninstall CRACO if you have customized the Create React App

Dependencies to Add​

  • vite
  • @vitejs/plugin-react (if using React)
  • @vitejs/plugin-react-swc (if using React with SWC)
  • react@18(if not already installed)
npm install -D vite @vitejs/plugin-react

OR

To use SWC

#NPM
npm install -D vite @vitejs/plugin-react-swc

Package.json Updates​

package.json
{
  "scripts": {
    // Remove
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",

    // Add
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest"
  }
}

Remove CRA Files​

Remove the following files in the public folder:

  • public/index.html

Remove the following Webpack and Babel related files:

  • config
  • scripts
  • babel.config.js or .babelrc (Remove this is your are using @vitejs/plugin-react-swc)

If you have used CRACO to customize Create React App, you'll need to remove the following files:

  • craco.config.js or craco.config.ts
  • .cracorc.js or .cracorc.ts (if using this alternative config format)

These configuration files are no longer needed since Vite provides its own configuration system through vite.config.ts.

vite.config.ts​

Create a vite.config.ts at the root of the project and add the following:

For Typescript:

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

For Javascript:

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

For Typescript with SWC:

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

Source Code​

index.html​

Create an index.html at the root of the project and add the following:

For Typescript:

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="theme-color" content="#ffffff" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Data Viz</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

For Javascript:

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="theme-color" content="#ffffff" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Data Viz</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

entry file​

  • Rename src/index.js or src/index.jsx to src/main.jsx or src/main.tsx if using TypeScript
  • Update the script tag in index.html to point to the new entry file
index.html
<!-- Before -->
<script src="/src/index.js"></script>

<!-- After -->
<script src="/src/main.js"></script>

Update Envrioment Variables​

Vite uses .env files for environment variables. The environment variables are prefixed with VITE_. Copy the .env.example file to .env and update the variables accordingly. You can also create a .env file at the root of the project and add the following:

.env
VITE_PROTOCOL=http
VITE_DOMAIN=localhost

VITE_REACT_APP_TITLE=Tobacco Control Data Initiative
VITE_REACT_APP_WP_API=$VITE_PROTOCOL://localhost/wp/wp-json
VITE_REACT_APP_WP_STYLES=$VITE_PROTOCOL://localhost/wp/wp-admin/load-styles.php?c=1&dir=ltr&load%5Bchunk_0%5D=dashicons,admin-bar,buttons,media-views,editor-buttons,wp-components,wp-block-editor,wp-nux,wp-editor,wp-block-library,wp-block-&load%5Bchunk_1%5D=library-theme,wp-edit-blocks,wp-edit-post,wp-format-library,wp-block-directory,common,forms,admin-menu,dashboard,list-tables,edi&load%5Bchunk_2%5D=t,revisions,media,themes,about,nav-menus,wp-pointer,widgets,site-icon,l10n,wp-auth-check&ver=5.5.6' id='wp-block-library-css
VITE_REACT_APP_GA_CODE=
VITE_REACT_APP_DEFAULT_LOCALE=en
VITE_REACT_APP_WP_HOSTS=http://localhost
VITE_REACT_APP_USE_HASH_LINKS=false

VITE_REACT_APP_THEME=cash

VITE_REACT_APP_GA_CODE="TEST"

VITE_REACT_APP_WP_SEARCH_END_POINT=/dg/v1/search
VITE_REACT_APP_API_ROOT=http://localhost

Common Challenges​

Path Aliases​

If you're using path aliases, update them in both TypeScript and Vite configurations:

vite.config.ts
export default defineConfig({
  resolve: {
    alias: {
      '@components': '/src/components',
      '@utils': '/src/utils',
    },
  },
});

Public Assets​

Vite serves public assets from the root of the project. Update the paths accordingly:

index.html
<!-- Before -->
<link href="%PUBLIC_URL%/favicon.ico" rel="icon" />

<!-- After -->
<link href="/favicon.ico" rel="icon" />

and

App.tsx
// Before
<img src={process.env.PUBLIC_URL + '/logo.png'} />
// After
<img src="/logo.png" />

File Extensions​

All Files with react components should have the .jsx or .tsx extension. Update the file extensions accordingly:

# Before
src/components/MyComponent.js

# After
src/components/MyComponent.jsx