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. 🎉
Top comments (0)