How to add Vite to an Existing React Project

What you need to have in check.

  1. A running react application
  2. A good network

Then

$ yarn add vite @vitejs/plugin-react-refresh
// vite.config.jsimport { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
export default defineConfig({
plugins: [reactRefresh()]
})
// package.json
"scripts": {
"start": "vite",
"build": "vite build",
"test": "vite test",
"eject": "vite eject"
},
<!-- Before edit -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- After edit -->
...
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<body>
...
<div id="root"></div>
<script type="module" src="/src/index.js"></script>
</body>

Finally

$ yarn start

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aaron Sunday

Aaron Sunday

FrontEnd Engineer, Smart Contractor, Day/Swing Trader…