DEV Community: Sahil Kumar

Supercharging React Development with Vite

Sahil Kumar — Mon, 31 Mar 2025 17:19:53 +0000

Introduction

If you've worked with React, you've likely encountered Create React App (CRA)—a command-line tool designed to simplify the process of bootstrapping new React projects. CRA provided a zero-config setup by bundling essential tools like Webpack, Babel, and ESLint, allowing developers to start coding immediately without dealing with complex configurations.

However, as modern development practices evolve, CRA’s capabilities have become increasingly limited. According to the official React documentation:

"Although Create React App makes it easy to get started, there are several limitations that make it difficult to build high-performance production apps. In principle, we could solve these problems by essentially evolving it into a framework."

Why Migrate from CRA?

At Playsimple, our internal dashboard tool relied on CRA until now, but as our application scaled, we began facing several issues that significantly affected our development speed and efficiency.

Some challenges faced using CRA:

🐌 Slow Build Times

CRA relies on Webpack, which pre-processes and bundles all dependencies upfront. As the project grew, this led to increasingly long build times, slowing down iteration speed.

⏳ Long Startup Times

The development server took several seconds to boot up, causing frustration and delays when making quick changes.

🏗️ Bloated Configurations

While CRA abstracted Webpack configurations, it also bundled unnecessary dependencies that we rarely touched but still had to maintain.

🔄 Slow Hot Module Replacement (HMR)

HMR in CRA was inefficient, causing delays in previewing changes. In contrast, modern tools provide instant feedback, making the development experience much smoother.

⚠️ CRA’s Deprecation

With CRA officially deprecated in February 2025 and its last update in 2022, maintaining compatibility with modern React libraries became increasingly difficult. Sticking with CRA would have meant more workarounds and technical debt in the long run.

Considering these issues, we had to decide: Should we migrate to a framework or switch to a different build tool?

Framework or Build Tool?

Most apps would benefit from a framework, but there are valid cases to build a React app from scratch. A good rule of thumb is if your app needs routing, you would probably benefit from a framework.

Since our app was already well-structured with React, adding a full-fledged framework would have introduced unnecessary complexity. Instead, we focused on improving developer experience and build performance, leading us to Vite—a faster and more efficient alternative to Webpack-based setups like CRA.

Webpack vs Vite Downloads in the past 5 years

What is Vite⚡

Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

A dev server that provides rich feature enhancements over native ES modules, for example, extremely fast Hot Module Replacement (HMR).
A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

How Vite is Different

Unlike Webpack, which bundles everything upfront, Vite leverages native ES modules (ESM) and only processes the files needed on demand. This results in:

⚡ Instant Startup – No waiting for the entire app to compile. Vite serves files directly to the browser, enabling instant cold starts.
🔥 Faster HMR – Changes reflect instantly in the browser without a full-page reload, making development smoother.
📦 Smaller & Optimized Builds – Vite uses esbuild for pre-bundling, which is 10-100x faster than Webpack.
🛠️ Simplified Configuration – Unlike CRA, which requires ejecting for custom setups, Vite offers a simple vite.config.js file for flexibility.
📉 Less Boilerplate & Dependencies – CRA comes with outdated dependencies. Vite is leaner, faster, and more efficient.

Comparison of traditional bundle-based dev servers vs Vite’s dev server

⚠️Caveats

While Vite offers significant advantages, there are some caveats to consider:

Vite Doesn’t Use ESM for Production

Although native ESM is widely supported, using unbundled ESM in production remains inefficient due to extra network round trips—even with HTTP/2. For optimal performance, bundling with tree-shaking, lazy-loading, and chunk splitting is still necessary.

Vite Uses Rollup Instead of esbuild for Production

Vite's current plugin API isn't compatible with esbuild as a production bundler. While esbuild is faster, Rollup provides a better balance between performance and flexibility. However, ongoing efforts, such as the Rust-based Rolldown project, may further improve Vite’s build performance in the future.

Conclusion

Migrating from CRA to Vite drastically improved our development workflow, reducing build times, enhancing responsiveness, and simplifying configuration.

✅ Build time dropped from 5 minutes to just 60 seconds.
✅ Development server startup reduced from 30 seconds to under 1 second.
✅ Hot reloading is now nearly instantaneous, thanks to Vite’s optimized approach.

This transition has empowered our team to iterate faster, reduce friction in development, and maintain a scalable build system.

References

🔜 Next Steps: Read the Migration Guide →

Migrating from Create React App to Vite — A Step-by-Step Guide

Sahil Kumar — Mon, 31 Mar 2025 16:56:13 +0000

Migrating from Create React App (CRA) to Vite enhances development speed and efficiency, making it ideal for industry-level projects. CRA’s reliance on Webpack often results in slower builds and hot module replacement (HMR). Vite, leveraging ES modules, provides instant HMR, faster builds, and a leaner setup. This guide walks through the migration process, covering essential updates for configurations, environment variables, TypeScript, testing, and build optimizations.

1. Install Required Packages

First, install the necessary dependencies for Vite:

npm install vite @vitejs/plugin-react --save-dev

vite is the core build tool and development server that provides fast bundling and HMR.
@vitejs/plugin-react enables React-specific optimizations like Fast Refresh and JSX transformation.

2. Create Vite Configuration File

Create a vite.config.ts file in the root directory:

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
});

server.port specifies the port on which the Vite development server will run. By default, Vite uses port 5173, by setting it to 3000 makes it consistent with CRA.
server.open automatically opens the browser when the development server starts.

3. Move `index.html` to Root

Move public/index.html to the project root and update src:

<script type="module" src="./src/index.jsx"></script>

Unlike Webpack, which dynamically injects the src attribute into index.html using plugins like HtmlWebpackPlugin, Vite requires you to explicitly define the entry file. Since Vite does not modify index.html dynamically, specifying the src ensures the application loads correctly.

Now, remove all %PUBLIC_URL% occurrences in the index.html file:

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

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

4. Update Script Commands

Replace the CRA scripts in package.json with Vite equivalents:

"scripts": {
  "start": "vite",
  "build": "vite build",
}

5. Update Environment Variables

Vite exposes env variables under import.meta.env object as strings automatically. To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code.

Update Variable Declarations:

Replace REACT_APP_ with VITE_ in all your environment variables

// CRA
REACT_APP_STAGING = staging;

// VITE
VITE_STAGING = staging;

Update Variable Usage:

// CRA
export const config = process.env.REACT_APP_STAGING ? "staging" : "dev";

// VITE
export const config = import.meta.env.VITE_STAGING ? "staging" : "dev";

6. Improve TypeScript Support and `tsconfig.json`

If your project uses TypeScript, follow these steps to ensure compatibility and improved performance.

Update the following properties in tsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "isolatedModules": true,
    "types": ["vite/client"]
  },
  "include": ["vite.config.ts"]
}

One thing you should know about Vite is that Vite only performs transpilation on .ts files and does NOT perform type checking. It assumes type checking is taken care of by your IDE and build process.

The reason Vite does not perform type checking as part of the transform process is because the two jobs work fundamentally differently. Transpilation can work on a per-file basis and aligns perfectly with Vite's on-demand compile model. In comparison, type checking requires knowledge of the entire module graph. Shoe-horning type checking into Vite's transform pipeline will inevitably compromise Vite's speed benefits.

Adding type checking support in Development

During development, if you need more than IDE hints, Vite recommends running tsc --noEmit --watch in a separate process, or use vite-plugin-checker if you prefer having type errors directly reported in the browser. In this guide we will go with the second approach.

Install vite-plugin-checker:

npm install --save-dev vite-plugin-checker

Update vite.config.ts:

import tsChecker from "vite-plugin-checker";

export default defineConfig({
  plugins: [tsChecker({ typescript: true })],
});

Adding type checking support for Production Builds

For production builds, we will run tsc --noEmit in addition to Vite's build command.
Update package.json:

"scripts": {
  "build": "tsc --noEmit && vite build",
}

The --noEmit flag prevents the compiler from generating JavaScript output files.

7. Convert Files to `.jsx` and `.tsx`

Rename files accordingly:

.js → .jsx
.ts → .tsx

Why is this required ?
Vite avoids processing all .js and .ts files for JSX or TypeScript syntax by default to prevent unnecessary overhead, which could slow down the development server and build times. Instead, by explicitly using .jsx and .tsx extensions, Vite selectively applies transformations only to the files that require them. When encountering these files, Vite leverages esbuild to efficiently transform JSX or TypeScript syntax into standard JavaScript, ensuring faster builds and a more optimized development workflow.

8. Add Absolute Path Support & Path Aliasing

In the Vite configuration file, paths can be resolved using the config.resolve property. Since manually defining numerous paths can be tedious, we use the vite-tsconfig-paths package. This package enables Vite to resolve imports using TypeScript’s path mapping automatically.

Install vite-tsconfig-paths:

npm install --save-dev vite-tsconfig-paths

Update vite.config.ts:

import tsconfigPaths from "vite-tsconfig-paths";
import path from "path";

export default defineConfig({
  plugins: [tsconfigPaths()],
  resolve: {
    alias: {
      "@assets": path.resolve(__dirname, "src/assets"),
    },
  },
});

If any of your path aliases do not work as expected with vite-tsconfig-paths, you can manually define them as shown above.

9. Add SVG Support

Install vite-plugin-svgr:

npm install --save-dev vite-plugin-svgr

Update vite.config.ts:

import svgr from "vite-plugin-svgr";

export default defineConfig({
  plugins: [svgr()],
});

Import SVG files as components:

import ChartIcon from "@assets/icons/Charts.svg?react";

10. Configure Production Build & Target

Update vite.config.ts:

export default defineConfig({
  build: {
    outDir: "build",
    target: "es2021",
  },
});

build.outDir specifies the output directory for the built files. By default, Vite outputs the build to the dist folder, but here it is customized to match CRA's default output directory.
build.target sets the JavaScript target version for the output files. The default value is "modules", ensuring compatibility with modern browsers that support ES module syntax.
For older browser compatibility, refer to the Vite Browser Compatibility Guide

11. Add Testing with Vitest

Install testing dependencies:

npm install --save-dev vitest jsdom @testing-library/react @testing-library/jest-dom @vitest/ui

Update tsconfig.json:

"compilerOptions": {
    "types": ["vitest/globals"]
},

Update package.json:

"scripts": {
  "test": "vitest --ui"
}

The --ui flag in vitest --ui starts the Vitest UI, providing a visual test runner interface. It allows you to view test results, rerun specific tests, and debug failing tests interactively within a browser-based interface.

Update vite.config.ts:

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: /* <path to test setup file> */,
    include: ["src/**/*.test.*"],
  },
});

Update test setup file:

import { expect } from "vitest";
import matchers from "@testing-library/jest-dom/matchers";

// extends Vitest's expect method with methods from react-testing-library
expect.extend(matchers);

Update Test Files:

describe, expect, it, and test work the same as in Jest
Replace jest.fn() with vi.fn()
For further changes, refer to Vitest Migration Guide

12. Adding Code Coverage

We will integrate Istanbul to generate code coverage reports. Other available option is v8

Installation:

npm install --save-dev @vitest/coverage-istanbul

Update Script in package.json:

"scripts": {
  "test:coverage": "vitest run --coverage"
}

Update vite.config.ts:

export default defineConfig({
  test: {
      coverage: {
        provider: "istanbul",
        reporter: ["lcov"],
        include: /* Specify directory or files here */,
      },
    },
});

13. Enable Source Maps & Add Bundle Visualizer

To enable source maps in Vite, update the build.sourcemap option in the Vite configuration:

Update vite.config.ts:

export default defineConfig({
  build: {
    sourcemap: true,
  },
});

Since Vite uses Rollup for production builds, we will install rollup-plugin-visualizer to visualize source maps.

Install rollup-plugin-visualizer:

npm install --save-dev rollup-plugin-visualizer

Update vite.config.ts:

import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [visualizer()],
});

To prevent the visualizer from running with every build, we will create a separate script for it.
Update package.json:

"scripts": {
  "stats": "vite build && open stats.html"
}

14. Setting Global Variable

Vite does not define a global field on window like Webpack does. Some libraries rely on this behavior because Webpack, being older, has established it as a common practice.

Update index.html:

<script>
  window.global = globalThis;
</script>

15. Update storybook support

Install @storybook/react-vite

npm install --save-dev  @storybook/react-vite

Update .storybook/main.ts:

const config = {
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
};

export default config;

16. Update Sentry Configuration

Update vite.config.ts: Additionally, to enhance the debugging process, we will upload source maps to Sentry.

import { sentryVitePlugin } from "@sentry/vite-plugin";

export default defineConfig({
    plugins: [
      sentryVitePlugin({
        org: /* <Sentry Org Name> */,
        project: /* <Sentry Project Name> */,
        authToken: /* <Sentry Auth Token> */,
        sourcemaps: {
          filesToDeleteAfterUpload: ["./build/**/*.map"],
        },
        release: {
          name: /* <Your app release version or build no> */,
        },
      }),
    ],
});

filesToDeleteAfterUpload option deletes the source map after the sourcemaps are uploaded to sentry

17. Remove CRA and Webpack-Related Configurations

Finally, delete unnecessary Webpack-related files and dependencies, including:

Remove react-scripts commands
Uninstall Jest-related packages
Uninstall the following Webpack-related dependencies:
- webpack
- webpack-bundle-analyzer
Sentry webpack package : @sentry/webpack-plugin
Storybook webpack packages : @storybook/builder-webpack5, @storybook/manager-webpack5

References

Contribute

If you feel any step can be improved, more details can be added, or new steps should be included, please feel free to contribute!

Check out the repository and submit a pull request:

GitHub Repository

Choosing the Right Chart Library

Sahil Kumar — Sun, 16 Mar 2025 18:10:27 +0000

Importance of Data Analytics

In a data-driven company, data analytics plays a crucial role in making informed decisions, optimizing operations, and predicting trends. It enables businesses to extract meaningful insights from raw data, leading to increased efficiency, improved customer experiences, and a competitive edge. Without proper analytics, organizations risk making decisions based on intuition rather than data-driven evidence.

📊 Role of Data Visualization

A key component of analytics is Data Visualization, which translates complex datasets into clear, interactive visuals such as charts and dashboards. Effective visualization helps identify patterns, correlations, and anomalies that might be overlooked in raw data. It also enhances communication by allowing stakeholders to quickly grasp insights and make faster, data-driven decisions.

To implement data visualization effectively, a chart library is required. The challenge, however, is choosing the right one. A quick online search for the best chart library will result in an overwhelming number of options. To the naked eye, most charting libraries appear similar apart from their aesthetics. However, aesthetics alone should not be the deciding factor.

So, how should one choose a chart library which is best suitable for their needs? 🤔
In this blog, I will share some pointers that one should consider before choosing the right library.

🔍 Key Factors to Consider

📈 Chart Types

What types of charts are required? (e.g., Line, Bar, Bubble, Area charts, etc.)

📊 Dataset Size

How large is the dataset that needs to be visualized?

🎨 Customization

How easily can the look and feel of the charts be modified?

📱 Platform Compatibility

Will the app be used on the web, mobile, or both?

🌍 Browser Support

Does the library support all required browsers based on our user base?

⚙️ JavaScript Framework Compatibility

Does it integrate well with our tech stack (React, Vue, etc.)?

🖼️ Rendering Technology

Rendering technology plays a crucial role in charting performance and interactivity. Many developers overlook how these technologies work internally and how they impact scalability and user experience. Below is a breakdown of the three primary rendering methods:

Feature	SVG (Scalable Vector Graphics)	Canvas (HTML5 Canvas API)	WebGL (Web Graphics Library)
How It Works	Uses DOM elements for rendering vector graphics.	Draws graphics pixel by pixel on a bitmap.	Uses GPU acceleration to render graphics efficiently.
Performance	Slower with large datasets due to high DOM overhead.	Faster than SVG, better suited for medium to large datasets.	Extremely fast, capable of rendering millions of data points.
Interactivity	High – Each element is a DOM node, making event handling easy.	Moderate – Requires manual event handling for interaction.	Low – Handling events requires extra effort.
Scalability	Excellent – Scales without pixelation, ideal for zooming.	Poor – Zooming in can cause pixelation.	Excellent – Can handle complex, high-performance visualizations.
Customization	Easy – Can be styled with CSS and animations.	Moderate – Styling requires JavaScript manipulation.	Complex – Requires custom shader programming for advanced effects.
Best For	Small to medium datasets, business dashboards, interactive visualizations.	Medium to large datasets, real-time updates, performance-heavy applications.	Massive datasets, 3D visualizations, real-time simulations.
Examples	Highcharts, D3.js	Chart.js, Apache ECharts	SciCharts, Lightning Chart

🏆 Conclusion

Selecting a chart library is an important decision, whether for personal projects or enterprise-level data visualization. It's crucial to identify your needs and define what you expect from the library, considering factors like performance, customization, and ease of use.

I hope this blog helps you make an informed decision when choosing the right charting library for your needs. With the right tool, you can create clear, effective, and visually appealing data visualizations that enhance decision-making and user experience.

DEV Community: Sahil Kumar

Supercharging React Development with Vite

Introduction

Why Migrate from CRA?

Some challenges faced using CRA:

🐌 Slow Build Times

⏳ Long Startup Times

🏗️ Bloated Configurations

🔄 Slow Hot Module Replacement (HMR)

⚠️ CRA’s Deprecation

Framework or Build Tool?

What is Vite⚡

How Vite is Different

⚠️Caveats

Vite Doesn’t Use ESM for Production

Vite Uses Rollup Instead of esbuild for Production

Conclusion

References

🔜 Next Steps: Read the Migration Guide →

Migrating from Create React App to Vite — A Step-by-Step Guide

1. Install Required Packages

2. Create Vite Configuration File

3. Move index.html to Root

4. Update Script Commands

5. Update Environment Variables

Update Variable Declarations:

Update Variable Usage:

6. Improve TypeScript Support and tsconfig.json

Adding type checking support in Development

Adding type checking support for Production Builds

7. Convert Files to .jsx and .tsx

8. Add Absolute Path Support & Path Aliasing

9. Add SVG Support

Import SVG files as components:

10. Configure Production Build & Target

11. Add Testing with Vitest

12. Adding Code Coverage

13. Enable Source Maps & Add Bundle Visualizer

14. Setting Global Variable

15. Update storybook support

16. Update Sentry Configuration

17. Remove CRA and Webpack-Related Configurations

References

Contribute

Choosing the Right Chart Library

Importance of Data Analytics

📊 Role of Data Visualization

🔍 Key Factors to Consider

📈 Chart Types

📊 Dataset Size

🎨 Customization

📱 Platform Compatibility

🌍 Browser Support

⚙️ JavaScript Framework Compatibility

🖼️ Rendering Technology

🏆 Conclusion

📄 References

3. Move `index.html` to Root

6. Improve TypeScript Support and `tsconfig.json`

7. Convert Files to `.jsx` and `.tsx`