ASAP_A1

How to add Vite to an existing React project.

Aaron's photo
Aaron
·

2 min read

Just incase you're wondering how to boost your dev server if you already got a project up and running with our beautiful react application, here I will show you how to infuse Vite into your project and experience that speed you've always wanted.

Also if you are wondering what is Vite and probably want to use it, you can checkout my last tutorial on 'How to use Vite with React'

Without no further a do...

What you need to have in check.

  1. A running react application
  2. A good network

Then

Setup the required packages from you terminal like this

yarn add vite @vitejs/plugin-react-refresh

Create a vite.config.js file in your root folder and add the following code

// vite.config.js

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

export default defineConfig({
  plugins: [reactRefresh()]
})

This config file pre-bundles your dependencies when sever is running.

From your root folder too, edit your package.json. This define the bundler for starting, building and previewing the application from the initial react-create start...

// package.json

  "scripts": {
    "start": "vite",
    "build": "vite build",
    "test": "vite test",
    "eject": "vite eject"
  },

Still from your root folder, open /public folder and move the index.html file to the parent folder. In the file, go ahead and remove all the %PUBLIC_URL% attached too any <link.../> and a <script> tag and hence reference to the appropriate directory like so /src/index.js/.

<!-- 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

You can now run 

yarn start

Happy vite coding.

viteReactJavaScriptProgramming Blogs