Comparison and migration guide for Vite 3.0 vs. Create React App
Published: 2022-09-05 05:10:54

<!-- wp:paragraph -->
<p>Create React App (CRA) has been instrumental in the growth of the React community and its ecosystem as a whole. When it comes to constructing a local React development environment on the fly, it is the tool of choice for developers of all skill levels.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>CRA has several distinguishing features that make it difficult to overlook, the most notable of which are: local development server, Hot Module Replacement (HMR), and production bundling. However, CRA has a significant disadvantage in progressive speed and performance degradation.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The performance of Create React App degrades as an application grows in size and complexity, and the time it takes to start a development server increases significantly. This renders CRA unsuitable for production.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This guide will introduce Vite, an esbuild-based build tool. We'll go over everything you need to know to get started with Vite and building React applications. We'll also go over the differences between Vite and CRA and show you how to transition from Create React App to Vite.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://lh3.googleusercontent.com/-_3l0PWpIuVo/YxUKMFi6-RI/AAAAAAAACaQ/QA8HeLvlK7YaWb2KITCpXncZhgbyQvslgCNcBGAsYHQ/s1600/1662323245939486-0.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Prerequisites</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You'll need the following to follow along with the tutorial portion of this article:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Node.js 14.18 or later</li><li>A browser that supports native ES modules (ESM) and dynamic imports; most modern browsers do.</li><li>A package manager like npm or Yarn</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>What exactly is Vite?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Vite is a development tool designed to bridge the gap between current and next-generation web development. It focuses on giving developers and current web projects a faster and more performant experience.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Vite is built on esbuild, a Go-based JavaScript bundler that bundles dependencies 10-100 times faster than JavaScript-based bundlers.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Evan You, the creator of Vue.js, created Vite. It is, however, platform-independent, which means it can be used to develop JavaScript/TypeScript applications that support popular libraries such as React, Svelte, Preact, and even vanilla JavaScript.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Vite uses the browser's native ESM to parse and compile your code as it is requested by the browser. The source file is then served using a plugin like Koa (a lightweight Node.js web server) to create a development server with support for Hot Module Replacement (HMR) for updating served modules and Rollup for production builds.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What are the workings of Vite and Create React App?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It's not as different as you might think between Vite and CRA. They both serve a local development server and bundle codes for production, which is essentially what they both do. You'll notice primary differences in the supported modules and how code is served during development.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>By allowing developers to concentrate on their code rather than setting up build tools, the Create React App development environment aids in the acceleration of the development process.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>CRA's internal core functionalities are handled by a third-party build tool called webpack. Vite is actually up against this.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>What is Webpack, then? Similar to Vite, webpack is a bundler for JavaScript modules. However, in contrast to Vite, Webpack supports multiple modules out of the box:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>ESM</li><li>CommonJS</li><li>Asynchronous Module Definition (AMD) API</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Webpack combines assets and modules into one or more static assets using any of these JavaScript module systems and then uses the Express.js web server and webpack-dev-server to serve content from the bundled asset with HMR support.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We'll break down how both tools handle these functionalities in development to put things into perspective.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://jainil.dev/react-cheat-sheet-for-beginners/" target="_blank" data-type="post" data-id="2141" rel="noreferrer noopener">Create React App in development</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The first thing webpack does when you start a CRA development is use the app's entry point (the <code>index.js</code> file) to build a tree of dependencies from every module in the project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The code is then transpired with Babel, bundled, and served using the Express.js web server. Last but not least, it prepares sockets for the Hot Module Replacement.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Although this method is quicker and allows you to concentrate on your code, it has a serious disadvantage.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.eternaldev.com/static/8d2bca125a7ee84af38ab7e519532a02/f9218/bundlebasedevserver.jpg" alt="Comparison and migration guide for Vite vs. Create React App"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Vite in development</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>However, before Vite starts serving your app, you only need to pre-bundle your dependencies using esbuild the first time you start development.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Vite is much faster than CRA because it doesn't need to bundle the entire app or transpile the modules and code before starting a development server. Instead, transpiring is done as needed.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Instead of rebuilding and reloading the entire page like CRA, Vite uses route-based code-splitting to determine which portion of the code needs to be loaded after serving the app. It then parses the native ES modules from the app's entry point using the browser.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This means that for each import, the browser will send an HTTP request back to the server after reading the <code>import</code> and <code>export</code> statements in your code. When necessary, the dev server intercepts the requests and transforms the code.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The browser simply ignores modules that haven't been modified because they return a 304 "not modified" status code. The application keeps its state and the browser avoids having to reload.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here is a diagram showing how the Vite was developed:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://i0.wp.com/craftsmenltd.com/wp-content/uploads/2022/06/esc.png?resize=1060%2C663&amp;ssl=1" alt="Comparison and migration guide for Vite vs. Create React App"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Why should you use Vite?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We previously discussed some of the benefits of using Vite for React app development. Let's take a closer look at Vite's advantages.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Outstanding performance</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Vite transforms dependencies that are shipped as CommonJS or UMD into ESM during the pre-bundling process. Because Vite only supports and serves native ESM codes by default, this conversion takes place.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For faster page loads, Vite can combine dependencies with multiple internal modules into a single module. These modules frequently send out hundreds of requests all at once, which may clog up the browser and slow download times. However, they only need to send one request because these dependencies have already been pre-bundled into a single file, improving overall performance.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Plugin compatibility is extensive.</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>By enabling developers to rely on the established Rollup plugin ecosystem, Vite enhances the developer experience. In other words, Vite is ready to use with the majority of Rollup plugins.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Quicker updates</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We previously described how the size of the application has a significant negative impact on HMR speed in a bundled-based server.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>HMR is applied to native ESM in Vite. A module that accepts hot updates only needs to be precisely invalidated by Vite when changes are made to it. No matter how large the application, this leads to a quicker HMR update time.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Increased build speed</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Vite creates production-ready apps using pre-configured Rollup. Vite's build time typically runs faster than that of CRA because Rollup is a more effective bundler than Webpack, and its output is smaller.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Creating a React project in Vite 3.0</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To make a Vite app, open the terminal on your machine, <code>cd</code> to a preferred folder, and run the following command:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">npm install vite@latest</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>The CLI will prompt you for a project name after you run the command. In this case, we'll stick with the default name vite-project. Then, from the list of available templates, we'll choose to react. This usually takes tens of seconds or less.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","sizeSlug":"large"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://www.section.io/engineering-education/develop-and-deploy-fast-apps-with-vite-js/project-name.jpg" alt="Comparison and migration guide for Vite vs. Create React App"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Alternatively, you can specify your preferred template in the command to avoid the prompt.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can do this by including the <code>--template</code> flag, followed by the name of the framework:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">npm init vite@latest vite-project --template react</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>Next, navigate to the project folder, install any required dependencies, and launch the dev server using the following commands:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">cd vite-project
npm install
npm run dev
</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>Following the execution of these commands, a development server will be available on port 5173. Vite typically serves an application in 1325ms.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","sizeSlug":"large"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://blog.logrocket.com/wp-content/uploads/2022/09/vite-ready-in-1325-ms.png" alt="Comparison and migration guide for Vite vs. Create React App"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now open your browser and type <strong>localhost:5173</strong> into the address bar. You'll see a page similar to the one below, complete with the iconic count button.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","sizeSlug":"large"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://blog.logrocket.com/wp-content/uploads/2022/09/vite-and-react-page.png" alt="Comparison and migration guide for Vite vs. Create React App"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>That's all! We have successfully established a Vite React development environment!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The following section will go over how to migrate a Create React App project to Vite.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Migrating a Create React App project to Vite</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It's not too difficult to migrate an existing CRA project to Vite.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Open <code>package.json</code> in your project folder, then <code>remove-react-scripts</code> from the list of dependencies as a first step:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">  "dependencies": {
    ...
    "react-scripts": "5.0.1",
    ...
  }, </pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>Next, include a "<code>devDependencies</code>" with the information listed below:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">  "devDependencies": {
    "@vitejs/plugin-react": "^2.0.1",
    "vite": "^3.0.7"
  },  </pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>N.B., using the most recent version is always advised.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Replacing the scripts now</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>Including the following</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">  "scripts": {
    "start": "vite",
    "build": "vite build",
  }, </pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>Next, go to the&nbsp;<code>index.html</code>&nbsp;file inside the&nbsp;<code>Public</code>&nbsp;folder and remove every&nbsp;<code>%PUBLIC_URL%/</code>prefix in the link paths:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

&lt;link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

&lt;link rel="manifest" href="%PUBLIC_URL%/manifest.json" /></pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>Replace the prefix that was removed with the following:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;link rel="icon" href="./public/favicon.ico" />
 ...
&lt;link rel="apple-touch-icon" href="./public/logo192.png" />
 ...
&lt;link rel="manifest" href="./public/manifest.json" /></pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>Then, add an entry point script inside the&nbsp;<code>body</code>&nbsp;element, just below the&nbsp;<code>root</code>&nbsp;div:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;script type="module" src="/src/index.jsx">&lt;/script>
</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>But before you do this, rename every&nbsp;<code>.js</code>&nbsp;the file that contains React codes to a&nbsp;<code>.jsx</code>&nbsp;file. For example, you’d rename the&nbsp;<code>index.js</code>&nbsp;file&nbsp;<code>index.jsx</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Then, move the&nbsp;<code>index.html</code>&nbsp;file to the root folder.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","sizeSlug":"large"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://blog.logrocket.com/wp-content/uploads/2022/09/index-file.png" alt="Comparison and migration guide for Vite vs. Create React App"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The following steps are to create a Vite configuration file, delete the node modules folder, and reinstall the dependencies.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Begin by creating a <code>vite.config.js</code> file in the root directory and add the following code:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
})</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>Next, go to the root folder and delete the&nbsp;<code>node_modules</code>&nbsp;folder. Then, run the following command to reinstall the dependencies and start the development server:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">npm install
npm start</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>The development server should now successfully boot up if you open your browser and navigate to localhost:5173.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://fullstackcode.dev/wp-content/uploads/2022/01/vite-react-app-1536x826.png" alt="Comparison and migration guide for Vite vs. Create React App"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Differences between Create React App and Vite</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We have compared the functions of CRA and Vite and discussed some advantages of using Vite over CRA. Let's now examine some distinctions between these tools.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Absolute imports</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The difference in path resolving is probably the first thing you'll notice when you start developing with Vite. Vite lacks an internal <code>src</code> path, unlike CRA.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As a result, use the following syntax to import files and components into your React app:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import Cards from "components/cards";</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>They must be imported in the following manner:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import Cards from “/src/components/cards.jsx”
</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>Fortunately, this path resolving has a fix.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Open the <code>vite.config.js</code> file in the project's root folder, then change the existing code:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
}); </pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>With the following:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  resolve: {
    alias: [
      {
        find: "common",
        replacement: resolve(__dirname, "src/common"),
      },
    ],
  },

  plugins: [react()],
});</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>You should now be able to use absolute paths in your project after saving the code.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Environment variables</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The way environment variables are named in Create React App and Vite is another difference. You should substitute <code>VITE_</code> for <code>REACT_APP_</code> if your project makes use of environment variables.</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">//Instead of this 
REACT_APP_ API_KEY = 1234567890..
//Use this
VITE_API_KEY = 1234567890..</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>It can be tedious to change each variable individually, especially if your <code>.env</code> file contains a large number of variables. Fortunately, we can use environment variables without changing their names thanks to the vite-plugin-env-compatible package.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To install the vite-plugin-env-compatible package, issue the following command:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">npm i vite-plugin-env-compatible
</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>Next, go to the&nbsp;<code>vite.config.js</code>&nbsp;file in the root folder of the project and add the following code:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock {"language":"js"} -->
<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import envCompatible from 'vite-plugin-env-compatible';

export default defineConfig({
    ...
  envPrefix: 'REACT_APP_',

  plugins: [
    react(),
    envCompatible
  ],
});</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>Vite will be instructed to use variables with a <code>REACT_APP_ </code>prefix by the <code>envPrefix </code>property. Environment variables can now be used in your project without having to change their names. You will still need to change <code>import.meta.env</code> in your code to replace <code>process.env</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can quickly locate and replace each process.env in your codebase by using the search feature in your IDE.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this article, we introduced Vite, contrasted its fundamental ideas with Create React Apps, and examined how both tools function during the development process. We also looked at Vite's advantages and showed you how to convert a Create React App project to it.</p>
<!-- /wp:paragraph -->