Upgrade Your React App with Vite: Faster Builds, Real-Time ESLint Feedback, and Cleaner Files

What is this tutorial about?

This guide will walk you through setting up Vite for a faster and simpler development experience. We'll also configure ESLint to help catch issues as you code. Finally, we'll clean up unnecessary files from your project and organize the structure.

Why go through all this work?

Switching to Vite speeds up and simplifies development. It updates changes instantly and keeps everything lightweight, with less setup and fewer headaches. Vite is perfect for projects with TypeScript, React, or Vue.

Who is this tutorial for?

This guide is for developers who are used to Create React App or Webpack and want to try out a faster, simpler build tool without changing much code.

Introduction
Vite helps make your project run faster and easier to manage. Here are the key reasons:

Fast Reloads: Vite instantly updates your project as you code.
Less Setup: Vite has a simpler configuration, so there are fewer files to manage.
Better Performance: Vite is optimized for speed, both in development and when building for production.

Let's begin

Step 1: Moving to Vite

Install Vite: Open your terminal, go to your project folder, and run:

npm install vite @vitejs/plugin-react --save-dev

yarn add -D vite @vitejs/plugin-react

Move index.html: In a Vite project, index.html should be in the root of the project (not in the public folder). Move it by:
Cutting index.html from the public folder.
Pasting it directly into your main project folder.

Edit index.html: In the moved index.html file, add the script tag with this:

<script type="module" src="/src/index.tsx"></script>

This tells Vite to load your app's code from src/index.tsx, so it knows where to start.

Also, replace %PUBLIC_URL% with / in the index.html file, as Vite doesn't use this syntax. Here's how:

Open index.html: Go through the index.html file and look for any occurrences of %PUBLIC_URL%.

Replace %PUBLIC_URL% with /: For example, if you see something like this:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

Change it to:

<link rel="icon" href="/favicon.ico" />

Update Package Scripts: Open package.json and replace your old start, build, and test scripts with Vite's commands:

"scripts": {   
   "dev": "vite",   
   "build": "vite build",   
   "serve": "vite preview" 
}

Create a Basic Vite Configuration File: In the root of your project, create a vite.config.js file and add the following:

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

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

This file sets up Vite to work with React.

Step 2: Setting Up ESLint for Real-Time Code Feedback

To check your code for mistakes as you work, follow these steps to set up ESLint:

Install ESLint and Plugins: Run the following in your terminal:

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin vite-plugin-eslint --save-dev

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin vite-plugin-eslint

Add ESLint Configuration: Create an .eslintrc.js file in your root folder and add this configuration:

module.exports = {   
   parser: '@typescript-eslint/parser',   
   plugins: ['@typescript-eslint'],   
   extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended'  ],   
   rules: {     // Add any additional ESLint rules here   } 
}

Link ESLint with Vite: Open your vite.config.js file again and add the ESLint plugin:

import { defineConfig } from 'vite'; 
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';  

export default defineConfig({   
  plugins: [react(), eslint()], 
})

Run Your Dev Server with ESLint: Now, start your development server:
ESLint should show any issues in the terminal or your code editor.

Step 3: Cleaning Up Unnecessary Files

After switching to Vite, you can remove the following files:
Webpack Config Files: webpack.config.js or similar files related to Webpack setup.

Babel Configuration Files: If you're not using Babel, you can delete .babelrc or babel.config.js.
Unused public Folder Content: Since index.html is now in the root, you can delete it from the public folder. If you have other files in public you don't need anymore, clean them out.

Step 4: Test Your Vite Setup

To check everything is working:
Start Development Server:

npm run dev

yarn dev

This will open the app, and you'll see updates instantly when you make changes.

Wrapping Up

You're now ready to use Vite for faster development! With ESLint, you can catch issues as you code, and the cleanup removes unnecessary files. Enjoy your improved development setup!