Create-React-App Version

Learn how to replace Vite with Create-React-App

Introduction

Create-React-App was a popular tool for creating React applications that is no longer maintained, and it is not recommended to use it for new projects due to its slow build times and lack of features. Not to mention, it will not be compatible with the latest versions, and will not receive any updates or bug fixes, including security updates.

Since we cannot guarantee the security of Create-React-App, we will not be providing a version of our product that uses it, however we will provide a guide on how to replace Vite with Create-React-App.

The current version of our product supports an easy migration from Vite to Create-React-App, but we cannot guarantee that future versions will support it.

Guide

Install pnpm

Due to some issues with Create-React-App and npm installed packages, we recommend using pnpm to install the dependencies.

npm install -g pnpm

Remove Vite Configuration

Remove the vite.config.mts file from your project.

Replace Dependencies

Uninstall Vite from your project.

pnpm uninstall vite
pnpm uninstall @vitejs/plugin-react

Install Create-React-App (react-scripts).

pnpm install react-scripts

Install Craco to customize the Create-React-App configuration. We need it to handle the alias paths (@/components, @/hooks, etc).

You can also eject the Webpack configuration and customize it directly, but it is not recommended.

pnpm install -D @craco/craco

If you see incompatibility warnings that block the install you may have used npm instead of pnpm.

Scripts Configuration

Replace the vite scripts in your package.json with the following:

{
  "scripts": {
    "start": "craco start",
    "build": "craco build"
  }
}

Index Files

Move the file index.html to public/index.html and replace the following line:

<body>
  <div id="root"></div>
- <script type="module" src="/src/main.tsx"></script>
</body>

Rename src/main.tsx to src/index.tsx.

Craco Configuration

Create a craco.config.js file in the root of your project with the following content:

const path = require('path');
 
module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

Environment Variables

Update .env.local (if you created it) environment variables to use REACT_APP_ prefix prefixes from VITE_ to .

Update src/config.ts and src/lib/get-site-url.ts to use process.env.REACT_APP_ instead of import.meta.env.VITE_.

Start the Application

Run the application with the following command:

pnpm start

Build the Application

Build the application with the following command:

pnpm build

Verify the Application

Verify that the application works as expected.

npx serve -s build

You should see the application running at http://localhost:3000.