The React team no longer recommends using create-react-app (CRA) as a bundler to create a new React application. The team and community realized that even though CRA was a jump-starter, it lacked the flexibility needed to configure or manage large and complex applications.Nowadays, the team recommends using production-grade React frameworks like NextJS, Remix, Gatsby, or Expo for native apps. While frameworks are the preferred choice, the React team also recommend using Vite or Parcel for custom build processes.This is partly because the CRA package has not been updated for about a year. This may cause some problems where packages already updated to more recent versions cannot be used within an existing application. As a result, you may need to update existing applications by replacing the CRA package with the recommended alternatives — Vite or Parcel.This article walks you through the steps for migrating a production-based application from CRA to Vite. You will learn the "why" of each step, how to retain Jest for tests, and how to update your browserslist since it doesn't work with vite out of the box.In the conclusion section, you can find a sample pull request that includes all the changes. At the end of each step, you will find a sample commit text which shows the code change required per step.Here are the commands to install the packages we need:Apart from Vite, we are adding two plugins — @vitejs/plugin-react and  vite-tsconfig-paths.The vitejs/plugin-react plugin enables fast refresh in development, uses automatic JSX runtime, and custom Babel plugins or presets. It enriches your React development experience.The vite-tsconfig-paths plugin resolves imports for TypeScript's path mapping. For example, you can use components/ComponentName instead of ./../components/ComponentName.Another plugin you could consider is vite-plugin-svgr, which transforms SVG into React components and uses svgr under the hood. I left it out since we do not have such a use case in the application I’m migrating.You can also checkout other official Vite plugins here.Step 1 sample commit.On running vite in the command terminal, Vite tries to find a vite.config.ts file inside the project's root directory. You can read more on Vite's page for how to further configure this file for intellisense, environment based configurations, async configuration, and env variables usage.At your application’s root, create a file named vite.config.ts with the following content:Step 2 sample commit.This step is needed to reference a type declarations file which aids type checks and Intellisense. By default, Vite types are for a NodeJS environment. For client side code, Vite provides the type definitions in vite/client.d.ts.At your application’s root, create a file named vite-env.d.ts with the following content:Step 3 sample commit.Vite has a root directory which your files are served from. Since index.html is the entry point for Vite's server, the file needs to be in the root directory.From the public directory, move the index.html file to the root of your project.Step 4 sample commit.Two updates are necessary here:Vite automatically resolves URLs inside index.html, so there's no need for %PUBLIC_URL% placeholders. You can do a search and replace inside your index.html file for this. Be sure to remove all occurrences.Before:After:Vite treats index.html as source code and part of the module graph. It resolves