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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay