DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
ASAP_A1
ASAP_A1

Posted on

Using Vite on an existing React project

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
Enter fullscreen mode Exit fullscreen mode

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()]
})
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Finally

You can now run

$ yarn start
Enter fullscreen mode Exit fullscreen mode

Happy vite coding.

Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post