DEV Community: zahidkhan-xen

From CRA to Lightning Fast Vite with Cesium: My Real-World Migration Experience

zahidkhan-xen — Mon, 21 Jul 2025 10:44:53 +0000

With Create React App (CRA) officially deprecated, it was time for me to step out of my comfort zone and migrate my React project to a modern alternative Vite. In this article, I’ll walk you through my exact steps, learnings, and optimizations while migrating from CRA + CRACO to Vite, including Cesium integration, JSX conversion, and asset handling.

Why Migrate to Vite?

CRA has served well for years, but:

Hot Module Replacement (HMR) in CRA is relatively slow (~1000ms) compared to Vite (~200ms).

Cold Start: CRA took ~15 seconds to start dev server; Vite does it in just ~2 seconds.

Modern Tooling: Vite uses esbuild under the hood — it's 10–100x faster than Webpack.

CRA is officially deprecated — see this article.

https://build5nines.com/create-react-app-is-now-deprecated-time-to-migrate-to-vite-or-next-js/

Initial Cleanup: Say Goodbye to CRA & CRACO

Start by removing all CRA/CRACO-related dependencies:
npm uninstall react-scripts @craco/craco craco-cesium

Update package.json scripts:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}",
  "format": "prettier --write src/**/*.{js,jsx,ts,tsx,css,md,json,scss} --config ./.prettierrc"
}```



## Installing Vite & Required Plugins

Install core dependencies for React + Cesium support:



```jsx
npm install --save-dev vite @vitejs/plugin-react
npm install --save-dev vite-plugin-cesium
npm install cesium

Create vite.config.js

Here’s a basic configuration with Cesium support and API proxy:

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

export default defineConfig(({ command, mode }) => {
  // Load env file based on `mode` in the current working directory
  const env = loadEnv(mode, process.cwd(), '');

  return {
    plugins: [
      react({
        include: ['**/*.jsx', '**/*.js', '**/*.tsx', '**/*.ts'],
        babel: {
          plugins: [
            ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }]
          ]
        }
      }),
      cesium(),
    ],
    server: {
      proxy: {
        '/api': env.VITE_PORT_API_KEY,
        '/tilesets': env.VITE_PORT_API_KEY
      },
    },
    resolve: {
      alias: {
        '@': '/src',
      },
    },
    optimizeDeps: {
      exclude: ['react-virtualized'],
      include: ['prop-types'],
    },
    build: {
      assetsInlineLimit: 0,
      commonjsOptions: {
        include: [/react-virtualized/, /node_modules/],
      },
      chunkSizeWarningLimit: 1600,
    },
  };
});

Special Handling: Cesium Static Assets in Vite

Cesium relies on static assets (like Assets, Widgets, Workers) that need to be available at runtime.

Here’s how I handled it:

# Remove old public copy if exists
rm -rf public/cesium

# Copy Cesium assets from node_modules
cp -r node_modules/cesium/Build/Cesium public/cesium

Make sure your Vite config includes:

define: {
  CESIUM_BASE_URL: JSON.stringify('/cesium'),
}

Now Cesium will load correctly from /cesium in production.

Project Structure & HTML Changes

Replace %PUBLIC_URL%
Vite doesn’t support %PUBLIC_URL%. Just use root-relative paths:

<!-- index.html -->
<link rel="icon" href="/favicon.ico" />
<script type="module" src="/src/index.jsx"></script>

Convert .js to .jsx
If you’re using JSX inside .js files, rename them to .jsx. Here's a script to automate it:

rename-jsx.sh

#!/bin/bash
echo "🔍 Scanning for JSX in .js files..."

find ./src -name "*.js" | while read file; do
  if grep -qE "</?[A-Za-z].*?>" "$file"; then
    newfile="${file%.js}.jsx"
    mv "$file" "$newfile"
    echo "✅Renamed: $file → $newfile"
  fi
done

echo "🎉 Done! All JSX files renamed to .jsx"

Run it:

chmod +x rename-jsx.sh
./rename-jsx.sh

Handling Environment Variables

Vite uses the VITE_ prefix for env variables. Example:

VITE_FLAG_SMITH_API_KEY=abc123

Use it like this:

const key = import.meta.env.VITE_FLAG_SMITH_API_KEY;

Handling Static Assets

Move assets like images, logos, fonts to the /public folder.

Replace any require(...) statements with static import paths or import.

Old CRA way:

require('../../assets/logo.png')

Vite way:

src="/logo.png" // if inside public folder

Optional: To handle require in legacy code, you can use:

npm install vite-plugin-commonjs --save-dev

Cesium Integration Notes

Vite does not automatically handle Cesium static files like CRA + craco-cesium did.

Manually copy Cesium assets:

rm -rf public/cesium
cp -r node_modules/cesium/Build/Cesium public/cesium

Make sure CESIUM_BASE_URL is defined in vite.config.js as shown earlier.

Clean Up Dev Dependencies

Remove unused CRA-related packages:

npm uninstall html-webpack-plugin

Final Thoughts
Migrating from CRA to Vite brought massive speed improvements:

Cold Start: 15s ⏩ 2s

HMR: 1000ms ⏩ 200ms

Cleaner setup, no more heavy Webpack configs

Easier Cesium integration with vite-plugin-cesium

Whether you’re optimizing for speed or staying up-to-date with modern tooling, Vite is definitely the way forward.

Vite not loading Cesium.3DTileset

zahidkhan-xen — Thu, 17 Jul 2025 06:16:44 +0000

Problem arises when i upload 3D Tileset but its not rendering the map in 3D view , dont know if cesium need specific config with vite while i have shared my configs with you

Context API vs. Redux: When and Why to Use Them in React

zahidkhan-xen — Tue, 02 Jul 2024 16:03:07 +0000

Before starting to explore the differences and use cases of both Context API and Redux, it is essential to understand why these two solutions were developed.

In simple React, we can pass down data from parent components to child components. The parent component is where your main component is rendering. For example:

Let's say we have a component named Greet.js, and this component is rendering in App.js, making App.js its parent component. If we pass a constant firstName with the value "John", it will look like this:

//App.js
export const App = () => {
  const firstName = "John";

  return (
    <Greet name={firstName} />
    <Profile name={firstName} />

  );
}

// Greet.js
export const Welcome = ({ name }) => {
  return <h1>Welcome : {name}</h1>;
}

//Profile.js
export const Profile = ({ name } => {
return <h1> userName : {name} </h1>

This above method also known as Prop Drilling .Passing props can become inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop the prop drilling becomes complex and then for passing props we use context API.

Context API:

Context is a way to pass data through the component tree without having to pass it down manually at every level.It's beneficial for sharing data that can be considered "global" for a tree of React components, such as the current authenticated user, theme, or preferred language.
There are three step to implement Context API:

Create a Context: Define a context to hold the state.

Provide Context: Wrap the top-level component with the context provider.

Consume Context: Use the context in the child components to access the state.

1-Create a Context

// UserContext.js
import React, { createContext, useState } from 'react';

const UserContext = createContext();

const UserProvider = ({ children }) => {
  const [name, setName] = useState("John");

  return (
    <UserContext.Provider value={{ name }}>
      {children}
    </UserContext.Provider>
  );
};

export { UserContext, UserProvider };

2-Provide Context

// App.js

import React from 'react';
import { UserProvider } from './UserContext';
import Welcome from './Welcome';
import Profile from './Profile';

const App = () => {
  return (
    <UserProvider>
      <div>
        <Welcome />
        <Profile />
      </div>
    </UserProvider>
  );
};

export default App;

3-Consume Context

// Welcome.js
import React, { useContext } from 'react';
import { UserContext } from './UserContext';

const Welcome = () => {
  const { name } = useContext(UserContext);

  return <h1>Welcome: {name}</h1>;
};

export default Welcome;

// Profile.js
import React, { useContext } from 'react';
import { UserContext } from './UserContext';

const Profile = () => {
  const { name } = useContext(UserContext);

  return <h1>userName: {name}</h1>;
};

export default Profile;

Using the Context API allows data to flow anywhere in the component tree, making it a superior method for managing application state compared to prop drilling. However, as applications grow in complexity and certain side effects become challenging to manage within individual components, Redux emerges as a powerful solution.

React Redux

Redux simplifies state management by centralizing it through a global store. It not only eliminates the need for prop drilling but also provides an efficient way to handle side effects using middleware. This approach ensures that side effects, such as asynchronous data fetching or logging, are managed centrally, keeping components focused solely on UI rendering.

Let's understand it with example :
These steps involved in Redux data flow:

Create Action : Define action to be perform

Create Reducer : Define how to perform action and update it

Create Store : Recieved updated state from Reducer and make it available to call in any component.

1.Create Action

// userActions.js
export const setName = (name) => ({
  type: 'SET_NAME',
  payload: name,
});

2.Create Reducer

// userReducer.js
const initialState = {
  name: 'John', // initial state
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_NAME':
      return { ...state, name: action.payload };
    default:
      return state;
  }
};

export default userReducer;

*3.Create Store *

// store.js
import { createStore } from 'redux';
import userReducer from './userReducer';

const store = createStore(userReducer);

export default store;

Wrap your application with the Redux Provider component to make the store available to all components.

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Welcome from './Welcome';
import Profile from './Profile';

const App = () => {
  return (
    <Provider store={store}>
      <div>
        <Welcome />
        <Profile />
      </div>
    </Provider>
  );
};

export default App;

Now, you can use this globally in any component by using useSelector hook :

// Welcome.js
import React from 'react';
import { useSelector } from 'react-redux';

const Welcome = () => {
  const name = useSelector(state => state.name);

  return <h1>Welcome: {name}</h1>;
};

export default Welcome;

Conclusion:

In the end, whether you choose React's Context API or Redux depends on what your application specifically requires and the particular challenges it faces.

How we can change the color of enableSearch in LazyLog?

zahidkhan-xen — Thu, 10 Aug 2023 12:01:44 +0000