DEV Community

Bryan Liao
Bryan Liao

Posted on • Edited on • Originally published at bryanliao.dev

Switching to Vite from React-Scripts

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',
});
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay