Switching to Vite from React-Scripts

Posted On: 2024-05-26

I have a silly react project that I’m working on that I made using create-react-app. By default, these kinds of projects build and run using react-scripts which uses webpack under the hood for building projects. Vite is generally known to be faster than Webpack ⚡ so I was curious about how to swap them.

Installation is simple enough, there’s two dev dependency modules that need to be included: Vite and Vite’s React Plugin

To utilize Vite, start by creating a vite.config.js file. Here’s a very basic example of what I added:

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

export default defineConfig({
	plugins: [react()].
	root: 'src',
});

Since Vite uses index.html as the entry point for the application, I moved it out of my public folder and into my src folder. I removed the %PUBLIC_URL% part from my HTML file and added a script to point to where my react root was created:

<script type='module' src='./index.tsx'></script>

All that’s left is to replace the scripts in package.json to use vite commands instead and remove react-scripts as a dependency. 🎉