Navdeep Mishra

Posted on Aug 25, 2023

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:

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.
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.
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:

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

Step 2:
Uninstall the react-script (CRA) from your project. 😆

yarn remove react-scripts

Step 3:
Let's modify our package.json scripts. 😮

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
},

Step 4:
Create the vite.config.json in your root directory of the project 😯

touch vite.config.js

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()],
  };
});

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"' {} \;

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"' {} \;

Step 6:
After renaming, move the index.html from public folder to your root directory. 🙃

mv public/index.html .

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  -->

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>

That's all for normal project using CRA. We'll see few bonus tips ass well. 😉

Now run

yarn dev

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

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';

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';

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()],
  };
});

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

Use in this way

//from 
process.env.REACT_APP_TEST=true
//to
import.meta.env.VITE_TEST=true

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'],
        },
      }),
    ],
  };
});

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 😎