DEV Community

Cover image for Killing the Create React App - CRA to Vite migration guide (Javascript)
Navdeep Mishra
Navdeep Mishra

Posted on

Killing the Create React App - CRA to Vite migration guide (Javascript)

#react #vite #createreactapp #webdev

Create React App (CRA) is a popular tool for creating React applications. It provides a quick and easy way to get started with React, but it can be limiting in terms of features and flexibility. Vite is a newer build tool that offers a number of advantages over CRA, including faster development times, smaller bundle sizes, and more customization options.

Here are some of the reasons why you might want to migrate from CRA to Vite:

  1. Faster development times: Vite uses native ES modules and has a built-in dev server that can hot reload your changes in real time. This can save you a lot of time when you're developing your application.
  2. Smaller bundle sizes: Vite uses modern build tools to optimize your code, which can result in smaller bundle sizes. This can improve the performance of your application and make it easier to deploy to production.
  3. More customization options: Vite has a simpler configuration than CRA, which gives you more control over how your application is built. This can be helpful if you need to customize your build process for specific needs.

Of course, there are also some potential drawbacks to migrating to Vite:

  1. Less community support: Vite is not as widely used as CRA, so there is less community support available. This can make it more difficult to find help with problems you might encounter when using Vite.

Overall, the benefits of migrating from CRA to Vite outweigh the drawbacks. If you're looking for a faster, more customizable, and more performant build tool for your React applications, then Vite is a great option.

Let's now quickly see how we can do that. ๐Ÿ˜Ž

If you already have an app running on Create React App or CRA with JS template then follow the below steps to migrate safely.

Note: I am using Yarn here for package management. If you are using npm or pnpm then use commands according to your package manager. ๐Ÿ˜Ž

Step 1:
We have to install first vite in our project. ๐Ÿ”ฅ

yarn add -D vite @vitejs/plugin-react
Enter fullscreen mode Exit fullscreen mode

Step 2:
Uninstall the react-script (CRA) from your project. ๐Ÿ˜†

yarn remove react-scripts
Enter fullscreen mode Exit fullscreen mode

Step 3:
Let's modify our package.json scripts. ๐Ÿ˜ฎ

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
},
Enter fullscreen mode Exit fullscreen mode

Step 4:
Create the vite.config.json in your root directory of the project ๐Ÿ˜ฏ

touch vite.config.js
Enter fullscreen mode Exit fullscreen mode

Step 5:
Copy paste the content mentioned below in your vite.config.js ๐Ÿค”

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

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});
Enter fullscreen mode Exit fullscreen mode

Step 6:
Now one of the crucial step is to rename all the existing files from js to jsx. Vite not supports js file containing any jsx syntax like '< or >' aka angular brackets but if you think any file is by mistake renamed then revert back that file to .js extension. ๐Ÿ˜†๐Ÿ˜†๐Ÿ˜†๐Ÿ˜†๐Ÿ˜†

To do that we have a smart command. Thanks to this Github Conversation

if using git then run this command in your root directory in bash terminal.

find ./src -type f -name '*.js' -not -name '*.jsx' -not -name '*.ejs' -exec bash -c 'grep -l "</" $0' {} \; -exec bash -c 'git mv "$0" "${0%.js}.jsx"' {} \;
Enter fullscreen mode Exit fullscreen mode

if not using git then run

# finds all *.js files that have either `</` or `/>` tags in them and renames them to *.jsx
find ./src -type f -name '*.js' -not -name '*.jsx' -not -name '*.ejs' -exec bash -c 'grep -l -E "</|/>" "$0"' {} \; -exec bash -c 'mv "$0" "${0%.js}.jsx"' {} \;
Enter fullscreen mode Exit fullscreen mode

Step 6:
After renaming, move the index.html from public folder to your root directory. ๐Ÿ™ƒ

mv public/index.html .
Enter fullscreen mode Exit fullscreen mode

Step 7:
Afterward, remove all %PUBLIC_URL% occurrences in the index.html file like mention below. You can use global search ctrl+shift+s in vs code to find and replace it. ๐Ÿซก

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

<!-- do this for all occurrences  -->
Enter fullscreen mode Exit fullscreen mode

Step 8:
Last, link the src/index.js file in your moved index.html file like this

<body>
  <div id="root"></div>
  <script type="module" src="/src/index.jsx"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

That's all for normal project using CRA. We'll see few bonus tips ass well. ๐Ÿ˜‰

Now run

yarn dev
Enter fullscreen mode Exit fullscreen mode

Now open your browser and type localhost:5173 you'll see your project running. ๐Ÿ˜Ž

That's all for a project running on CRA.

Now Let's see some bonus tips.

  • If you are using **svg's as React Component you have to install svgr. Run** 
yarn add vite-plugin-svgr
Enter fullscreen mode Exit fullscreen mode

Now modify your vite.config.js

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

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [
      react(),
      // svgr options: https://react-svgr.com/docs/options/
      svgr({ svgrOptions: { icon: true } }),
    ],
  };
});

// which allows you to import SVGs as React components
// import { ReactComponent as MyIcon } from './my-icon.svg';
Enter fullscreen mode Exit fullscreen mode
  • If you want to use the path alias, then modify your vite.config.js 
import path from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

export default defineConfig(() => {
  return {
    resolve: {
      alias: {
        '~': path.resolve(__dirname, './src'),
      },
    },
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});

// which allows you to import from folders under the /src folder
// import Button from '~/components/Button';
Enter fullscreen mode Exit fullscreen mode
  • If you want to open browser on server start, add the following code in your vite.config.js 
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(() => {
  return {
    server: {
      open: true,
    },
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});
Enter fullscreen mode Exit fullscreen mode
  • If you face error for your env variables saying process is undefined or anything similar then remove the REACT_APP prefix from them and instead write VITE as prefix and instead of using process.env use import.meta.env.[VARIABLE_NAME] For more info on vite env variable and modes Check Here

i.e -

.env

REACT_APP_TEST=true
//to
VITE_TEST=true
Enter fullscreen mode Exit fullscreen mode

Use in this way

//from 
process.env.REACT_APP_TEST=true
//to
import.meta.env.VITE_TEST=true
Enter fullscreen mode Exit fullscreen mode
  • If you are using emotion, update your vite.config.js 
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [
      react({
        jsxImportSource: '@emotion/react',
        babel: {
          plugins: ['@emotion/babel-plugin'],
        },
      }),
    ],
  };
});
Enter fullscreen mode Exit fullscreen mode

That's all for this guide. ๐Ÿ˜‰ If you face any issue or have any updates please comment below. For more content please Share, Like and Follow.

Thankyou ๐Ÿ˜Ž

Top comments (3)

Collapse
 
respect17 profile image
Kudzai Murimi •

You nailed it! Trying it now

Collapse
 
navdeepm20 profile image
Navdeep Mishra •

Thankyou

Collapse
 
kevinsoe profile image
Kevin •

Thank you!!!

Read next

sonaykara profile image

React : Keeping Components Pure

Sonay Kara -

thin_v_54408449a80a1ce1 profile image

Data fetching with Incremental Static Regeneration (ISR) in Next.js

Thiแป‡n Vลฉ -

lucasmelo profile image

How to deploy affected NX projects to AWS S3 using Github Actions

Lucas Melo -

nik-bogachenkov profile image

Dive into Next.js Server Actions: Simplifying Data Fetching & Mutations

Nik Bogachenkov -