Switch to Vite

Migrate from Create React App to Vite

"Create React App" (CRA) has helped many developers get started with their first React project or maintain them.

It makes configuring your React app simple and streamlines the community’s best practices. However, the project has seen little improvement over the last year. We are still waiting for the latest Typescript support or upgrades to many other dependencies to address vulnerability issues.

Why is it dead?

Well, it is not dead, but the project is dying. Upgrading to Typescript 5 has been stalled for over a year. Even the recommendation from the React team tends to swing to established frameworks or Vite and Parcel if you need something else. Lastly, mentions of CRA have been removed from the official documentation in favour of frameworks:

If you’re still not convinced, or your app has unusual constraints not served well by these frameworks and you’d like to roll your own custom setup, we can’t stop you—go for it! Grab react and react-dom from npm, set up your custom build process with a bundler like Vite or Parcel, and add other tools as you need them for routing, static generation or server-side rendering, and more.

React Website

I’m a fan of Parcel when it comes to smaller and lightweight projects with low complexity. However, this article will focus on migrating the starter “Create React App” to Vite, as it allows for more complex setups and configurations.

Start with a Create React App

Start by creating a “Create React App” through the following commands:

npx create-react-app my-app --template typescript
cd my-app
npm run start

This gets you going with a standard CRA Typescript project. Try running npx npm-check-updates to see what packages are outdated. Let’s start migrating!

Migrate to Vite

The migration requires us to remove CRA and adapt some configurations and files. First, uninstall CRA and install Vite through:

npm uninstall react-scripts
npm install vite @vitejs/plugin-react --save
npm install vite-tsconfig-paths vite-plugin-svgr --save

There are many plugins available from Vite, for the ones we need:

// vite-tsconfig-paths allows us to use
import Button from 'components'
// instead of
import Button from '../components'

// vite-plugin-svgr allows us to import SVG files through
import { ReactComponent as Logo } from './logo.svg'.

After this, create a configuration file for Vite by running touch vite.config.ts and populate it with the following content:

import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';

// see more athttps://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
});

This step is where we configure Vite and enable plugins.

Next, we need to move our index.html to the project’s root by running mv public/index.html index.html.

Open the index.html file and remove all occurrences of %PUBLIC_URL%:

// remove all %PUBLIC_URL%
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
// and change it to
<link rel="icon" href="/favicon.ico" />

Additionally, add the script after the root div:

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
// add this line below the root declaration
<script type="module" src="/src/index.tsx"></script>

Next, open tsconfig.json and change target, lib and types to:

"target": "ESNext",
"lib": ["dom", "dom.iterable", "esnext"],
"types": ["vite/client", "vite-plugin-svgr/client"],

We also need to configure Vite for our Typescript app, run touch vite-env.d.ts and add the following content to the file:

/// <reference types="vite/client" />

Finally, add the necessary scripts to the package.json file:

"scripts": {
  "start": "vite",
  "build": "tsc && vite build",
  "serve": "vite preview"
},

We can now run the application using npm install && npm run start.

Start with a Vite App

To get started with a clean install, head over to create-vite and choose the template you want to get started with. Then run:

npm create vite@latest my-app -- --template react
cd my-app
npm run start

This process follows the same as “Create React App” initially offered.

Conclusion

Congratulations, we now have a running React app using Vite. Stay tuned for the following article, where I’ll dive deep into additional tools, such as linting and testing, to round up the migration.

‘Till next time!