--- title: "How to Migrate smoothly from CRA to Vite for React?" description: "In the ever-evolving landscape of React development, it's essential to keep up with the latest recommendations from the React team. One significant shift in their guidance is the move away from..." url: https://blog.codedthemes.com/how-to-migrate-from-cra-to-vite-for-react/ date: 2023-11-04 modified: 2024-10-26 author: "codedthemes" image: https://blog.codedthemes.com/wp-content/uploads/2023/11/migrate-cra-to-vite-react.png categories: ["How to"] type: post lang: en --- # How to Migrate smoothly from CRA to Vite for React? In the ever-evolving landscape of React development, it’s essential to keep up with the latest recommendations from the React team. One significant shift in their guidance is the move away from Create React App (CRA) as the default bundler for creating new React applications, transitioning from CRA to (https://vitejs.dev/). The rationale behind this change is rooted in the recognition that while CRA served as a helpful jump-start for many projects, it lacked the flexibility required to configure and manage large, complex applications effectively. Today, the React team and the community at large are advocating for the use of production-grade React frameworks, such as Next.js, Remix, Gatsby, or Expo for native applications. These frameworks offer a more robust and versatile approach to building and scaling React projects, making them the preferred choice for modern development. In addition to these frameworks, the React team also suggests considering Vite and Parcel for custom build processes. This shift is partly motivated by the fact that the Create React App package has not received updates for approximately a year. This lack of updates may lead to compatibility issues, especially when working with packages that have moved on to more recent versions. To ensure your projects stay up-to-date and maintain compatibility with the latest packages, you might need to consider migrating away from CRA and adopting the recommended alternatives, such as Vite or Parcel. This transition can help future-proof your applications and provide greater flexibility in managing their development and deployment. **Are you ready to embark on a journey to enhance your production based React application by migrating from Create React App (CRA) to Vite? This article is your comprehensive guide, not just on the “how,” but also the “why” behind each step of the migration process. You’ll gain a deep understanding of the reasons behind every decision, empowering you to make informed choices as you navigate this transition.** **Checkout **– (https://blog.codedthemes.com/introduction-to-vitejs/) ## **Step 1: Elevate Your Environment with Vite and Essential Plugins** To kickstart your migration journey, the first step is to bring in the essential tools and plugins that will power your React application in its new home, Vite. These are the commands to get you started: ``` npm install vite @vitejs/plugin-react vite-tsconfig-paths ``` In addition to Vite itself, there are two key plugins in above command, each serving a distinct purpose in enhancing your development environment: 1. **@vitejs/plugin-react**: This plugin is your gateway to a smoother development experience. It introduces fast refresh in development, harnesses the power of automatic JSX runtime, and opens the door to custom Babel plugins and presets. Brace yourself for an enriched React journey! 2. **vite-tsconfig-paths**: This is to resolving imports seamlessly when dealing with TypeScript’s path mapping. Say goodbye to those cumbersome relative import paths like `./../components/ComponentName`. With this plugin, you can embrace cleaner and more efficient import statements such as `components/ComponentName`. If you are using JS and `jsconfig.json`, you can use `vite-jsconfig-paths` instead `vite-tsconfig-paths` ## **Step 2: Crafting Your Vite Configuration** In Vite, create a `vite.config.ts` file in your project’s root directory to tailor its behavior. Customize it for IntelliSense, environment-specific settings, and more. ``` import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import viteTsconfigPaths from 'vite-tsconfig-paths'; export default defineConfig({ // depending on your application, base can also be "/" base: process.env.VITE_APP_BASE_NAME, plugins: , define: { global: 'window' }, resolve: { alias: [ ] }, server: { // this ensures that the browser opens upon server start open: true, // this sets a default port to 3000 port: 3000 } }); ``` ## **Step 3: Add Vite type support** Vite Types File To enhance type checks and Intellisense, you’ll need a type declarations file. By default, Vite’s types are designed for NodeJS environments. For client-side code, you can access type definitions in `vite/client.d.ts`. In your project’s root directory, create a `vite/client.d.ts` file with the following content: ``` /// ``` ## **Step 4: Relocate and update the index.html** Vite operates with a designated root directory from which your files are served. Because `index.html` serves as Vite’s server entry point, it must reside in this root directory. To make the necessary adjustment, move the `index.html` file from the `public` directory to the root of your project. Make sure it’s at root not inside `src` directory. Once done there might following two changes needed. 1. Remove PUBLIC_URL: Vite automagically resolves URLs within the `index.html` file, eliminating the need for %PUBLIC_URL% placeholders. So, remove any reference of %PUBLIC_URL% from file. 2. Include Module Script in the Body Tag: Vite views index.html as part of the module graph and resolves `